Vue 组件边界：从职责而不是行数拆分

刚开始写 Vue 页面时，我常用文件行数判断组件是否应该拆分。后来发现，行数只是结果，更稳定的判断依据是：一段界面由谁管理数据，以及它为什么发生变化。

三个判断问题

1. 这部分是否拥有独立的输入与输出？
2. 它的变化原因是否和父页面不同？
3. 单独测试它，能否减少父页面测试的组合数量？

三个问题中有两个答案是“是”，通常就值得形成子组件。反过来，只出现一次、没有独立状态的一小段模板，即使稍长，也未必需要抽象。

页面、状态与请求的边界

我更习惯让页面负责组合，让状态仓库负责跨组件状态，让服务层负责请求细节：

页面组件 → Store 动作 → Service → 网络请求

这样做的价值不是层数更多，而是界面无需知道鉴权头、重试和协议字段。服务端字段调整时，修改范围也更集中。

一次自检

提交前我会问：这个组件的名字是否表达业务职责？父组件是否仍能一眼看出页面结构？状态变化能否沿着一条清楚的路径追踪？如果答案含糊，通常说明边界还需要整理。