Vue 3 组件拆分与复用的几点心得

Vue 3 的 Composition API 让逻辑复用变得更自然，但组件拆分依然是最容易走偏的地方。拆得太细，文件满天飞；拆得不够，一个组件上千行。

什么时候该拆组件

• 同一段结构在两处以上重复出现
• 单个组件超过约 300 行
• 某块逻辑可以独立测试

复用的正确姿势

Vue 3 推荐用组合式函数（composables）复用逻辑，用 props 和 emit 复用组件。

// 组合式函数：复用请求逻辑
import { ref } from "vue";

export function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  async function load() {
    loading.value = true;
    data.value = await fetch(url).then(r => r.json());
    loading.value = false;
  }
  return { data, loading, load };
}

避免过度拆分

拆分组件是为了降低复杂度，如果拆完反而要在多个文件间跳来跳去才能看懂一段逻辑，那就是拆过头了。