Vue Best Practices 是一个以工作流形式使用的技能，定位为 Vue.js 任务的指令集。按资料说明，执行时应按顺序遵循其中的工作流，除非用户明确要求使用其他顺序。
用途
该技能用于 Vue.js 相关任务，尤其是需要统一架构选择和代码组织方式时。其描述强调：Vue.js 任务必须使用本技能，并强烈推荐以 Composition API、<script setup> 和 TypeScript 作为标准方案，覆盖 Vue 3、SSR、Volar 等场景。
核心原则
资料列出的核心原则包括：保持状态可预测，单一数据源，其余派生；让数据流明确，多数情况下属性向下、事件向上；偏好小型、聚焦的组件，便于测试、复用和维护；避免不必要的重渲染，合理使用计算属性和侦听器；重视可读性，编写清晰、自解释的代码。
使用方式与工作流
1. 编码前确认架构
默认技术栈为 Vue 3 + Composition API + <script setup lang="ts">。如果项目明确使用 Options API，则加载可用的 vue-options-api-best-practices 技能；如果项目明确使用 JSX，则加载可用的 vue-jsx-best-practices 技能。
1.1 必读核心参考
在实现任何 Vue 任务前，必须阅读并应用以下核心参考：
- references/reactivity.md
- references/sfc.md
- references/component-data-flow.md
- references/composables.md
这些参考需要在整个任务期间保持在工作上下文中，而不仅是在特定问题出现时才查阅。
1.2 编码前规划组件边界
对于任何非平凡功能，在实现前创建一份简要组件图。为每个组件用一句话定义其单一职责。默认让入口/根组件和路由级视图组件作为组合表面；除非任务是刻意做成极小的单文件演示，否则应将功能 UI 与功能逻辑移出入口/根/视图组件。在组件图中为每个子组件定义 props/emits 契约。当添加超过一个组件时，优先采用按功能分目录的布局，例如 components/<feature>/... 与 composables/use<Feature>.ts。
2. 应用 Vue 基础
必须应用以下基础内容。
响应式：保持源状态最小化（ref/reactive），尽可能用 computed 派生；需要副作用时使用侦听器；避免在模板中重复执行昂贵逻辑。
SFC 结构与模板安全：SFC 各段保持 <script> → <template> → <style> 的顺序；保持 SFC 职责聚焦，拆分过大组件；保持模板声明式，将分支/派生逻辑移到脚本；应用 Vue 模板安全规则，涉及 v-html、列表渲染、条件渲染选择。
保持组件聚焦：当一个组件有一个以上明确职责时拆分，例如数据编排加 UI，或多个独立 UI 区块。优先小型组件加 composables，而不是一个“巨型组件”。将 UI 区块移入子组件（props 进、events 出），将状态/副作用移入 composables（useXxx()）。资料给出客观拆分触发条件：若组件同时拥有编排/状态与多个区块的大量展示标记；若有 3 个以上不同 UI 区块，如表单、筛选、列表、页脚/状态；若模板块重复或可复用，如条目行、卡片、列表项。入口/根与路由视图规则：保持入口/根和路由视图组件轻薄，只放应用外壳/布局、provider 接线和功能组合；当功能包含独立部分时，不要把完整功能实现放在入口/根/视图组件中。对于 CRUD/列表功能（待办、表格、目录、收件箱），至少拆分为：功能容器组件、输入/表单组件、列表（和/或条目）组件、页脚/操作或筛选/状态组件。仅对非常小的丢弃型演示允许单文件实现；若选择单文件，必须明确说明为何无需拆分。
组件数据流：以 props down、events up 为主要模型；仅在真正的双向组件契约中使用 v-model；仅在深层树依赖或共享上下文时使用 provide/inject；用 defineProps、defineEmits 以及必要时 InjectionKey 保持契约显式且类型化。
Composables：当逻辑可复用、有状态或副作用较重时抽取为 composables；保持 composable API 小型、类型化、可预测；将功能逻辑与展示组件分离。
3. 仅在需求需要时考虑可选特性
标准可选特性默认不添加，仅在存在需求时加载对应参考。插槽：父组件需要控制子内容/布局时使用 component-slots。透传属性：包装/基础组件必须安全转发 attrs/events 时使用 component-fallthrough-attrs。内置组件 <KeepAlive> 用于有状态视图缓存，使用 component-keep-alive。内置组件 <Teleport> 用于覆盖层/传送点，使用 component-teleport。内置组件 <Suspense> 用于异步子树回退边界，使用 component-suspense。动画相关特性：选择匹配所需运动行为的最简方案。内置组件 <Transition> 用于进入/离开效果，使用 transition；内置组件 <TransitionGroup> 用于动画列表变更，使用 transition-group；非进入/离开效果使用基于类的动画，使用 animation-class-based-technique；用户输入驱动的动画使用状态驱动动画，使用 animation-state-driven-technique。
较少见的可选特性仅在明确产品或技术需要时使用。指令：行为属于 DOM 特定，不适合 composable/组件时使用 directives。异步组件：重型/少用 UI 应懒加载时使用 component-async。渲染函数：仅当模板无法表达需求时使用 render-functions。插件：行为必须应用级安装时使用 plugins。状态管理模式：应用级共享状态跨功能边界时使用 state-management。
4. 在行为正确后运行性能优化
性能工作是功能完成后的阶段。不要在核心行为实现并验证前进行优化。大列表渲染瓶颈使用 perf-virtualize-large-lists；静态子树不必要重渲染使用 perf-v-once-v-memo-directives；热列表路径中过度抽象使用 perf-avoid-component-abstraction-in-lists；昂贵更新触发过频使用 updated-hook-performance。
5. 完成前最终自检
自检项包括：核心行为可用且符合需求；所有必读参考已阅读并应用；响应式模型最小且可预测；遵循 SFC 结构与模板规则；组件聚焦且分解合理，需要时拆分；入口/根与路由视图组件保持组合表面，除非有明确的小型演示例外；组件拆分决策明确且可辩护，职责边界清晰；数据流契约显式且类型化；在复用/复杂度需要处使用 composables；如适用，已将状态/副作用移入 composables；可选特性仅在需求要求时使用；性能变更仅在功能完成后应用。
适用场景
适用于 Vue.js 开发任务，尤其是需要统一架构约定、组件边界规划、响应式与数据流规范、composables 抽取以及性能优化时机的场景。也可用于 Vue 3、SSR、Volar 相关任务，以及在 Options API 或 JSX 项目中进行针对性最佳实践调整。
限制
资料未提供该技能的具体安装命令、收费或价格信息、支持的平台范围以及实际效果数据，这些内容暂未提供。其参考文件名和内置组件、API 名称以原文为准。