基于vue-skills的Vue 3组件设计实战数据流、插槽与KeepAlive的12个最佳实践【免费下载链接】skillsAgent skills for Vue 3 development项目地址: https://gitcode.com/gh_mirrors/vu/skillsvue-skills是一套面向 AI Agent 的 Vue 3 开发技能库Agent skills for Vue 3 development把组件数据流、插槽设计、KeepAlive 缓存、性能优化与常见调试陷阱整理成了可直接执行的规则。本文从 vue-best-practices 技能 中提炼12 个组件设计最佳实践帮助新手写出状态可预测、结构清晰、缓存可控的 Vue 3 组件。 仓库为只读参考如需本地查看git clone https://gitcode.com/gh_mirrors/vu/skills。在提示词前加上use vue skill即可让 AI 严格按照这些规则生成代码。 数据流篇让状态单向流动vue-skills 的核心原则是Props Down / Events Up数据向下、事件向上这是最可维护的默认模型。完整规则见 component-data-flow.md。1️⃣ 遵循Props 向下、Events 向上的单向数据流Props 是只读输入子组件不要直接修改 props状态要变就emit事件。事件不会冒泡父组件想监听孙组件事件中间层必须显式 re-emit而不是指望它传上来。事件命名规范模板里用 kebab-caseupdate-user脚本里用 camelCaseupdateUser。2️⃣ 优先 props/emit 通信慎用组件 ref 命令式调用通过ref去调用子组件的submit()会造成隐式耦合。更好的做法是让子组件通过submit事件把数据抛给父组件。只有必须命令式访问时才用defineExpose暴露最小 API 并给 ref 加上类型。3️⃣ Vue 3.4 用 defineModel 实现可预测的 v-model双向绑定不要再手写modelValueupdate:modelValue的组合直接用defineModel({ type: String })一行搞定script setup const model defineModel({ type: String }) /script template input v-modelmodel / /template4️⃣ 深层组件共享上下文provide/inject Symbol 键props 逐层传递超过 3 层就该换 provide/inject但注意两点用Symbol 作为 key避免大型应用中的键名碰撞变更集中在 Provider向外暴露只读状态 显式 action如toggleTheme别让任意深度的消费方随意改共享状态。5️⃣ 用 TypeScript 契约给组件 API 加类型在 TS 项目中用类型化的defineProps、defineEmits和InjectionKey让错误的 payload 和失配注入在编译期就报错——这是组件接口自文档化的最优解。 插槽篇设计可组合的组件接口插槽是组件的核心 API 面结构不清晰会导致空 DOM 包裹、类型安全弱和脆弱默认值。规则详见 component-slots.md。6️⃣ 命名插槽用#简写并给可选插槽准备回退内容用#header代替冗长的v-slot:header给默认内容兜底slotSubmit/slot——父组件没传内容时组件依然可用健壮性直接拉满。7️⃣ 用 $slots 条件渲染可选插槽的包装元素当header classcard-header这类包裹元素带有间距、边框等布局样式时父组件不传插槽也会渲染出空 DOM 壳。正确做法是给包裹元素加v-if$slots.header有内容才渲染。8️⃣ 用 defineSlots 类型化作用域插槽在script setup langts中声明defineSlots插槽消费方就能获得自动补全和静态检查比如把product、index等插槽 props 类型写清楚还能顺带声明empty等空态插槽。9️⃣ 包装组件要完整转发插槽写增强/包装型组件如EnhancedButton包BaseButton时用v-for遍历$slots 动态插槽名v-slot:[slotName]把插槽原样转发并用v-bindslotProps ?? {}传递作用域插槽数据否则消费方将失去对内层组件插槽的定制能力。详细模式见 slot-forwarding-to-child-components.md。 纯逻辑复用优先 composable而非 renderless 组件如果组件只通过插槽输出逻辑如鼠标坐标追踪把它抽成useMouse()这类 composable 通常更干净——composable 无渲染开销、API 更小、更易测试。⚡ KeepAlive 篇缓存可控才是好缓存KeepAlive缓存组件实例而非销毁它误用会导致数据过期、内存增长、生命周期行为诡异。规则详见 component-keep-alive.md。1️⃣1️⃣ 用 max include/exclude 给缓存上锁KeepAlive :max5 includeDashboard,Settings component :iscurrentView / /KeepAlive必须用:max限制缓存实例数量防止内存无限增长include/exclude匹配的是组件name用defineOptions({ name: TabA })显式声明名字缓存才可靠搜索页、地图、大表格、敏感流程等场景不要缓存——每次进入都应该是新鲜状态。1️⃣2️⃣ 用 onActivated/onDeactivated 处理缓存感知生命周期被缓存的组件切换时不会销毁所以onActivated里刷新数据、恢复定时器onDeactivated里暂停轮询、停止后台活动路由场景下常见套路是给component绑定:keyroute.fullPath配合onActivated对比 query/params 决定是否重新拉取数据。⚠️避坑提醒KeepAlive 与嵌套路由组合时子路由组件可能出现双重挂载API 请求发两遍、状态初始化两次。建议只缓存叶子路由、避免缓存带 children 的父路由并给初始化逻辑加防重入守卫详见 keepalive-router-nested-double-mount.md。 快速上手清单场景首选方案参考文档父子通信props 下、emit 上component-data-flow.md双向绑定defineModelVue 3.4component-data-flow.md跨 3 层共享provide/inject Symbol 键component-data-flow.md组件接口定制插槽 defineSlots类型component-slots.md透传属性/事件注意useAttrs()非响应式component-fallthrough-attrs.md视图状态保持KeepAlive :max 激活钩子component-keep-alive.md 更多延伸阅读组合式函数规范composables.md响应式核心规则reactivity.md大列表虚拟化等性能优化perf-virtualize-large-lists.md小结组件设计的本质是契约——用单向数据流约束状态变化用类型化插槽约束接口形态用受限缓存约束生命周期。把这 12 条实践融入日常开发你的 Vue 3 组件会更容易测试、复用和维护。【免费下载链接】skillsAgent skills for Vue 3 development项目地址: https://gitcode.com/gh_mirrors/vu/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考