Vue业务逻辑拆分策略与分层架构实践

1. Vue业务逻辑拆分的必要性

在开发中大型Vue项目时，业务逻辑的合理拆分直接影响项目的可维护性和扩展性。我接手过不少"面条式代码"的Vue项目，所有逻辑都堆在组件里，一个.vue文件动辄上千行，这种代码就像一团乱麻——改个简单需求都可能引发连锁bug。

业务逻辑过度集中在组件会导致三个典型问题：

1. 组件变得臃肿难懂，template里混着大量计算逻辑
2. 相同逻辑在不同组件重复出现
3. 单元测试难以覆盖核心业务逻辑

2. 业务逻辑的四种拆分策略

2.1 组合式函数(Composables)封装

Vue 3的Composition API提供了完美的逻辑复用方案。我们可以将业务逻辑提取为独立的组合式函数：

javascript复制// useUserManagement.js
import { ref } from 'vue'
import api from '@/api'

export function useUserManagement() {
  const users = ref([])
  const loading = ref(false)
  
  const fetchUsers = async () => {
    loading.value = true
    try {
      users.value = await api.get('/users')
    } finally {
      loading.value = false
    }
  }
  
  return { users, loading, fetchUsers }
}

在组件中使用：

javascript复制import { useUserManagement } from '@/composables/useUserManagement'

export default {
  setup() {
    const { users, loading, fetchUsers } = useUserManagement()
    
    return { users, loading, fetchUsers }
  }
}

经验：组合式函数应该以use前缀命名，保持单一职责原则，每个函数只处理一个特定业务领域

2.2 状态管理集中化

对于跨组件共享的状态，建议使用Pinia：

javascript复制// stores/userStore.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('users', {
  state: () => ({
    users: [],
    currentUser: null
  }),
  actions: {
    async fetchUsers() {
      this.users = await api.get('/users')
    },
    async login(credentials) {
      this.currentUser = await api.post('/login', credentials)
    }
  }
})

组件中使用：

javascript复制import { useUserStore } from '@/stores/userStore'

export default {
  setup() {
    const userStore = useUserStore()
    
    return { userStore }
  }
}

2.3 工具类函数抽象

将纯业务逻辑提取为工具函数：

javascript复制// utils/priceCalculator.js
export function calculateDiscount(price, discountRate) {
  if (discountRate < 0 || discountRate > 1) {
    throw new Error('折扣率必须在0-1之间')
  }
  return price * (1 - discountRate)
}

这种纯函数易于测试：

javascript复制import { calculateDiscount } from '@/utils/priceCalculator'

describe('priceCalculator', () => {
  it('应正确计算折扣', () => {
    expect(calculateDiscount(100, 0.2)).toBe(80)
  })
})

2.4 高阶组件封装

对于UI相关的业务逻辑，可以使用高阶组件模式：

javascript复制// HOCs/withLoading.js
export const withLoading = (WrappedComponent) => {
  return {
    data() {
      return { isLoading: false }
    },
    methods: {
      async executeWithLoading(fn) {
        this.isLoading = true
        try {
          return await fn()
        } finally {
          this.isLoading = false
        }
      }
    },
    render() {
      return h(WrappedComponent, {
        isLoading: this.isLoading,
        executeWithLoading: this.executeWithLoading,
        ...this.$attrs
      })
    }
  }
}

3. 分层架构实践

3.1 推荐目录结构

code复制src/
├── components/      # 纯UI组件
├── composables/     # 组合式函数
├── stores/          # Pinia状态管理
├── utils/           # 工具函数
├── services/        # API服务层
├── hocs/            # 高阶组件
└── views/           # 路由级组件

3.2 服务层抽象

将API调用封装到service层：

javascript复制// services/userService.js
import api from '@/api'

export const UserService = {
  async getUsers(params) {
    return api.get('/users', { params })
  },
  async createUser(userData) {
    return api.post('/users', userData)
  }
}

4. 实战技巧与避坑指南

4.1 逻辑拆分边界判断

如何判断逻辑应该拆分：

• 被多个组件复用的逻辑 → 提取为composable/store
• 纯计算逻辑 → 工具函数
• 涉及API调用 → service层
• UI交互逻辑 → 高阶组件或自定义指令

4.2 性能优化技巧

1. 避免在composable中创建不必要的响应式变量
2. 对于大数据量的计算，使用computed + memoization
3. 使用shallowRef/shallowReactive减少不必要的深度响应

4.3 测试策略

1. 工具函数：100%单元测试覆盖率
2. composables：测试各种状态组合
3. stores：测试action和getter
4. 组件：只测试UI交互，mock业务逻辑

5. 复杂场景处理

5.1 跨模块通信

对于复杂的跨模块交互，可以使用Event Bus模式：

javascript复制// utils/eventBus.js
import mitt from 'mitt'
export const eventBus = mitt()

在组件A中触发：

javascript复制import { eventBus } from '@/utils/eventBus'

eventBus.emit('userLoggedIn', user)

在组件B中监听：

javascript复制import { eventBus } from '@/utils/eventBus'
import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const handleLogin = (user) => {
      console.log('User logged in:', user)
    }
    
    onMounted(() => {
      eventBus.on('userLoggedIn', handleLogin)
    })
    
    onUnmounted(() => {
      eventBus.off('userLoggedIn', handleLogin)
    })
  }
}

5.2 异步流程管理

复杂异步流程可以使用async/await配合状态管理：

javascript复制// stores/checkoutStore.js
import { defineStore } from 'pinia'

export const useCheckoutStore = defineStore('checkout', {
  state: () => ({
    steps: ['cart', 'shipping', 'payment', 'review'],
    currentStep: 'cart',
    loading: false,
    error: null
  }),
  actions: {
    async proceedToNextStep() {
      this.loading = true
      this.error = null
      
      try {
        await this.validateCurrentStep()
        const nextStep = this.getNextStep()
        this.currentStep = nextStep
      } catch (err) {
        this.error = err.message
      } finally {
        this.loading = false
      }
    }
  }
})

6. 代码组织最佳实践

1. 遵循单一职责原则：每个文件/函数只做一件事
2. 控制文件体积：单个文件不超过300行
3. 明确的依赖关系：避免循环依赖
4. 一致的命名规范：
   • composables: use前缀 + 业务名 (useUserAuth)
   • stores: use前缀 + 名词 + Store (useProductStore)
   • services: 业务名 + Service (PaymentService)
5. 类型安全：为复杂逻辑添加TypeScript类型定义

在大型项目中，我通常会配置ESLint规则来强制执行这些规范，比如限制组件文件行数、强制composable命名前缀等。