vue.js组件拆分应依据功能边界而非视觉区域，聚焦“干好一件事”，兼顾复用性、可维护性与协作效率；需平衡粒度，避免过细或过粗，并确保接口清晰、可测试、可演进。
Vue.js 组件拆分不是靠感觉，而是有明确依据的。核心在于让每个组件“干好一件事”，同时兼顾复用、维护和协作效率。
按功能边界划分，而非视觉区域
别一看到页面上有“头”“身”“尾”就机械拆成 Header / Main / Footer。真正该拆的是功能单元：用户登录流程、商品筛选逻辑、订单状态流转——这些才是天然的功能边界。一个“搜索框”如果只在首页用且带热搜逻辑，它可能还不足以独立成组件；但如果它出现在首页、分类页、详情页，且行为一致（含防抖、关键词高亮、历史记录），那就该抽出来。
- 判断标准：这个功能是否在多个地方出现？是否需要统一配置或样式？
- 典型例子：表单里的日期选择器、地址级联选择器、富文本编辑器封装
- 反例：把整个“用户资料编辑页”打包成一个大组件，里面混着头像上传、基础信息、安全设置等不同职责
粒度要适中，避免“过细”或“过粗”
组件太小，比如为每个 input 单独建 InputText、InputNumber、InputEmail，虽然看似单一职责，但会带来大量 props 透传、事件中转和嵌套层级，反而增加心智负担；组件太大，比如一个“Dashboard”组件囊括图表、通知、待办、统计卡片，就丧失了复用性和可测试性。
- 推荐起点：一个组件对应一个业务动作或数据展示单元（如“订单卡片”“评论列表项”“筛选条件组”）
- 可复用是重要信号：当发现两个页面都用到相同结构+相同交互逻辑，就是拆分时机
- 留出扩展余地：比如“用户头像”组件，初期只显示图片，但预留 size、shape、loading 状态等 props，比后期硬加更自然
接口清晰，内外责任分明
组件对外暴露什么、对内处理什么，要有一条线。外部只该关心“给什么数据、能做什么事”；内部则专注渲染逻辑、状态管理、副作用处理。
- Props 定义明确类型与默认值，避免接收庞大对象后自行解构
- 事件命名语义化，如 emit('update:status', value)，而不是 emit('change') 或 emit('click')
- 不依赖父组件具体结构，尽量用 slots 替代插槽内容硬编码，用 provide/inject 处理深层依赖而非层层传递
考虑可测试性与可演进性
一个容易写单元测试的组件，通常也是设计良好的组件。它应该能脱离上下文独立运行，输入确定 props 就有确定输出，触发事件就有预期响应。
- 避免在组件内直接调用全局 API 或路由跳转，改用事件或回调函数由父组件控制
- 异步逻辑尽量收敛，比如“加载用户数据”放在父组件或组合式函数里，子组件只负责展示 loading / error / success 状态
- 样式尽量 scoped，或使用 BEM 类名约定，减少意外样式污染影响复用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
