Vue 组件拆分笔记

Vue 项目写到后面，最容易失控的不是语法，而是组件边界。一个页面组件如果同时负责请求、状态、表单校验、弹窗、表格和样式，后续改一点东西都会变得很痛苦。

什么时候该拆组件

可以按三个信号判断：

• 模板超过一屏，已经不方便阅读。
• 某块 UI 在多个页面重复出现。
• 一个组件里有多组互不相关的状态。

不要为了拆而拆。组件拆分的目标是让页面更清楚，不是制造更多文件。

推荐拆分方式

页面组件负责组织流程：

ProjectPage.vue
├── ProjectToolbar.vue
├── ProjectTable.vue
├── ProjectEditorDialog.vue
└── useProjects.ts

页面组件关心“先请求数据，再展示列表，点击编辑打开弹窗”。具体按钮、表格、弹窗内部细节交给子组件。

props 和 emits

子组件不要偷偷改父组件的数据。父组件传入 props，子组件通过 emit 通知变化：

const props = defineProps<{
  title: string;
  loading?: boolean;
}>();

const emit = defineEmits<{
  save: [value: string];
}>();

这能让数据流更清楚，也方便排查 bug。

composable 放什么

useXxx.ts 适合放可复用逻辑：

• 请求与刷新
• 查询条件状态
• 分页状态
• 表单提交逻辑

不要把所有业务都塞进 composable。和 UI 强绑定的逻辑留在组件里反而更直观。

命名习惯

• 页面：ProjectPage.vue
• 业务块：ProjectTable.vue
• 弹窗：ProjectEditorDialog.vue
• 组合逻辑：useProjects.ts

名字要能让人一眼知道文件负责什么。

组件拆分的关键是边界稳定。页面管流程，子组件管展示，composable 管可复用逻辑。