vue组件设计关键在于解耦：响应式组件（容器）负责状态管理与逻辑调度，位于views/目录，对接store/api；纯展示组件只接收props、渲染ui、触发事件，无副作用，命名和目录结构体现角色分工。

Vue.js 中组件设计的关键不在于“能不能写在一起”，而在于“该不该耦合”。响应式组件（即容器组件）负责状态管理与逻辑调度，纯展示组件（即展示组件）只接收 props、渲染 UI、触发事件，不关心数据从哪来、怎么变。这种划分让组件更易测试、复用和协作。

响应式组件的核心职责

它不是“有响应式数据的组件”，而是承担应用层逻辑的顶层协调者。通常位于 views/ 目录下，直接与 store、API 或组合式 API 的逻辑层交互。

• 从 Pinia 或 Vuex 获取 state，并通过 computed 或 ref 派生数据
• 调用业务 API，处理 loading/error 状态，封装副作用（如路由跳转、通知提示）
• 把结构化数据、事件回调（如 onSubmit、onSelect）以 props 形式传给子组件
• 不包含任何 CSS 样式或 DOM 结构细节，模板中基本只写子组件标签和 v-if/v-for 控制流

纯展示组件的设计规范

它应像一个“函数”：输入（props）确定，输出（UI）就确定；无副作用、无外部依赖、不调用 API、不修改全局状态。

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

• props 必须全部声明，类型建议用 defineProps + TypeScript 接口或运行时验证
• 内部不使用 ref 或 reactive 管理业务状态（表单临时值除外），所有状态变更都通过 $emit 或事件回调通知父级
• 样式用 <style scoped></style> 隔离，避免影响其他组件；图标、按钮等原子元素尽量抽成独立小组件
• 可被 Jest/Vitest 单独挂载测试，只需 mock props 和监听 emit 即可覆盖主要路径

通信边界必须清晰

父子之间只走“单向数据流 + 事件回调”，避免反向依赖或跨层级取值。

• 父 → 子：用 props 传递数据和函数（如 :items="list"、@update="handleUpdate"）
• 子 → 父：子组件只 emit 语义化事件（如 submit、remove），不传 raw event 对象；父组件决定如何响应
• 避免在展示组件里调用 getCurrentInstance()、访问 $parent 或直接读写 store
• 需要跨组件共享状态时，优先用 provide/inject（限于局部上下文）或提取为独立 composable

实际命名与目录结构建议

名称和位置本身就是设计意图的体现，有助于团队快速理解组件角色。

• 容器组件命名带 Page 或 View 后缀，如 UserListPage.vue、DashboardView.vue
• 展示组件命名体现功能或形态，如 UserCard.vue、DataTable.vue、FormInput.vue
• 目录按角色分层：src/views/（容器）、src/components/（通用展示）、src/components/ui/（原子级展示）
• 业务相关展示组件可放在 src/modules/user/components/ 下，保持领域内聚

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！