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