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>隔离，避免影响其他组件；图标、按钮等原子元素尽量抽成独立小组件 - 可被 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/下，保持领域内聚
