Vue大型项目组件分层与复用策略

大型Vue项目需合理设计组件层级与复用策略，下面梳理核心设计方案。

组件分层架构

三层组件模型

components/
├── base/           # 基础组件（UI组件库）
│   ├── BaseButton.vue
│   ├── BaseInput.vue
│   └── BaseTable.vue
├── business/       # 业务组件（跨模块复用）
│   ├── UserSelector.vue
│   └── StatusBadge.vue
└── layout/         # 布局组件
    ├── Header.vue
    ├── Sidebar.vue
    └── Footer.vue

基础组件无业务逻辑，仅负责UI展示；业务组件包含特定业务逻辑。

展示组件与容器组件分离

展示组件（Presentational）

<!-- components/business/UserCard.vue -->
<script setup>
defineProps({
  user: { type: Object, required: true },
  loading: { type: Boolean, default: false }
})

defineEmits(['edit', 'delete'])
</script>

<template>
  <div class="user-card">
    <el-avatar :src="user.avatar" />
    <h3>{{ user.name }}</h3>
    <p>{{ user.email }}</p>
    <el-button @click="$emit('edit')">编辑</el-button>
    <el-button @click="$emit('delete')">删除</el-button>
  </div>
</template>

容器组件（Container）

<!-- views/user/components/UserCardContainer.vue -->
<script setup>
import { ref, onMounted } from 'vue'
import UserCard from '@/components/business/UserCard.vue'
import { userApi } from '@/api'

const props = defineProps({ userId: Number })
const user = ref(null)
const loading = ref(false)

onMounted(async () => {
  loading.value = true
  try {
    user.value = await userApi.getById(props.userId)
  } finally {
    loading.value = false
  }
})

const handleDelete = async () => {
  await userApi.remove(props.userId)
}
</script>

<template>
  <UserCard 
    v-if="user" 
    :user="user" 
    :loading="loading"
    @edit="handleEdit"
    @delete="handleDelete"
  />
</template>

容器组件负责数据获取与状态管理，展示组件仅负责UI渲染与事件派发。

组件复用策略

高阶组件模式

<!-- components/base/WithLoading.vue -->
<script setup>
defineProps({
  loading: Boolean
})
</script>

<template>
  <div v-if="loading" class="loading-spinner">加载中...</div>
  <slot v-else />
</template>

<!-- 使用方式 -->
<WithLoading :loading="isLoading">
  <UserCard :user="user" />
</WithLoading>

组合式函数复用

// composables/useCrud.js
import { ref } from 'vue'

export function useCrud(api) {
  const list = ref([])
  const loading = ref(false)
  
  const fetchList = async (params) => {
    loading.value = true
    try {
      list.value = await api.getList(params)
    } finally {
      loading.value = false
    }
  }
  
  const create = async (data) => await api.create(data)
  const update = async (id, data) => await api.update(id, data)
  const remove = async (id) => await api.remove(id)
  
  return { list, loading, fetchList, create, update, remove }
}

组件设计原则对比

要点总结

• 组件按基础/业务/布局三层分类，明确职责边界
• 采用展示组件与容器组件分离模式，降低耦合
• 通用逻辑封装为composables，替代mixins
• 基础组件无业务逻辑，仅通过props与events通信
• 大型项目应建立组件文档，说明使用场景与props

存放路径: articles/VUE/专家/大型项目架构分层设计/组件分层与复用策略.md