用途
vue-best-practices 是一套用于指导 Vue.js 开发任务的技能指令集，来源标识为 moeru-ai/airi。它被描述为必须用于 Vue.js 任务，强调以 Composition API、<script setup> 和 TypeScript 作为标准做法，并覆盖 Vue 3、SSR、Volar 等方向。资料以工作流形式给出，要求按顺序执行，除非用户明确要求不同顺序。
主要能力与规范
核心原则
- 保持状态可预测：单一数据源，其余派生。
- 让数据流显式：多数情况下 Props down，Events up。
- 偏好小而聚焦的组件：便于测试、复用与维护。
- 避免不必要的重渲染：合理使用计算属性和侦听器。
- 可读性重要：编写清晰、自说明的代码。
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>；保持职责聚焦，拆分大组件；模板保持声明式，将分支/派生移到脚本；应用 Vue 模板安全规则（v-html、列表渲染、条件渲染选择）。
保持组件聚焦：当组件有一个以上明确职责时拆分（例如数据编排 + UI，或多个独立 UI 区块）；偏好更小组件 + 组合式函数，而非单个“巨型组件”；将 UI 区块移入子组件（props in，events out）；将状态/副作用移入组合式函数（useXxx()）。提供客观拆分触发条件：组件同时拥有编排/状态与多个区块的大量展示标记；有 3 个以上不同 UI 区块（如表单、筛选、列表、页脚/状态）；模板块重复或可复用（条目标题、卡片、列表项）。入口/根与路由视图规则：保持入口/根与路由视图组件轻薄——应用外壳/布局、provider 接线与功能组合；当功能包含独立部分时，不要把完整功能实现放在入口/根/视图组件中。对于 CRUD/列表功能（todo、表格、目录、收件箱），至少拆分为：功能容器组件、输入/表单组件、列表（和/或条目）组件、页脚/操作或筛选/状态组件。仅允许非常小的抛弃型演示使用单文件实现；若选择该方式，需明确说明为何无需拆分。
组件数据流：以 props down、events up 作为主要模型；仅对真正的双向组件契约使用 v-model；仅对深层依赖或共享上下文使用 provide/inject；用 defineProps、defineEmits 以及按需的 InjectionKey 保持契约显式且有类型。
组合式函数：当逻辑被复用、有状态或副作用较重时抽到组合式函数；保持组合式函数 API 小而、有类型、可预测；将功能逻辑与展示组件分离。
3）仅在需求要求时考虑可选特性
3.1 标准可选特性：默认不添加，仅在需求存在时加载对应参考。插槽：父组件需要控制子内容/布局 -> 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。
3.2 较少见的可选特性：仅在有明确产品或技术需求时使用。指令：行为是 DOM 特定且不适合组合式函数/组件 -> 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 结构与模板规则。
- 组件聚焦且分解良好，需要时拆分。
- 入口/根与路由视图组件保持为组合面，除非有明确的小演示例外。
- 组件拆分决策显式且可辩护（职责边界清晰）。
- 数据流契约显式且有类型。
- 在复用/复杂度合理处使用组合式函数。
- 如适用，已将状态/副作用移入组合式函数。
- 仅在需求要求时使用可选特性。
- 仅在功能完成后应用性能变更。
使用方式
将该技能作为指令集使用，按工作流顺序执行，除非用户明确要求不同顺序。先确认架构与项目所用 API 风格（Composition API、Options API 或 JSX），再阅读四份必读核心参考，随后规划组件边界，按照必要基础与可选特性开展实现，最后进行性能优化与自检。
适用场景
适用于 Vue.js 开发任务，尤其是 Vue 3、SSR、Volar 相关场景；强调 Composition API、<script setup> 与 TypeScript 的工程实践。
限制
资料未提供该技能的安装命令、定价、收费方式、平台支持范围或效果保证等信息，相关内容暂未提供。资料中提到部分配套参考文档（如 references 下的多份 md 文件以及 vue-options-api-best-practices、vue-jsx-best-practices 等技能），其具体内容与获取方式在本次资料中暂未提供。