vue-best-practices

这玩意儿干嘛的？

Vue.js 开发必备指南，2,223 颗星。强制要求使用 Composition API + <script setup> + TypeScript 组合，覆盖 Vue 3、SSR、Volar、vue-tsc 的最佳实践。任何涉及 .vue 文件、Vue Router、Pinia 或 Vite + Vue 的开发任务，都应该先加载这个 Skill。

为什么值得装？

Vue 2 到 Vue 3 的迁移坑不少，Options API vs Composition API 的选择也经常让人纠结。vue-best-practices 给你一个明确的答案：Composition API 是标准解法。按这个 Skill 的规范来写，代码组织更清晰、性能更优、维护成本更低，还自动规避大多数常见陷阱。

怎么用？

1. 加载 Skill 后先读参考文件：references/reactivity.md、references/sfc.md、references/component-data-flow.md
2. 按规范写组件：<script setup lang="ts"> 为标准结构
3. 按需加载进阶参考：Slots、Fallback attrs、KeepAlive、Transition 等可选主题

核心功能

功能	说明
Composition API 规范	<script setup> + TypeScript 为标准，props down / events up 数据流
组件拆分原则	满足任一条件就拆分：同时管状态和 UI、3+ 个不同区域、模板可复用
响应式设计	ref/reactive 保持源状态最小化，用 computed 派生计算值
Composables 提取	可复用逻辑、有状态逻辑、副作用重的代码优先提取为 composable
路由与状态	Vue Router 和 Pinia 的规范化使用指南
性能优化	虚拟列表优化、不必要重渲染规避、updated 钩子性能注意事项