Vue 3 Best Practices 是一个面向 Vue 3 应用的性能优化与开发最佳实践指南技能，包含跨 8 个类别的 45 条规则，并按影响力排序，用于指导自动化重构和代码生成。
适用场景
在以下情况可参考这些规则：编写新的 Vue 3 组件或 composables；实现响应式数据与计算属性；审查代码中的性能问题；从 Vue 2 重构到 Vue 3；优化打包体积或加载时间；使用状态管理（Pinia/Vuex）；在组件中实现异步操作。
规则类别与优先级
优先级从高到低依次为：响应式性能（关键，前缀 reactivity-）；组件优化（关键，前缀 component-）；打包体积与加载（高，前缀 bundle-）；Composition API（中高，前缀 composition-）；模板性能（中，前缀 template-）；状态管理（中，前缀 state-）；生命周期优化（中低，前缀 lifecycle-）；高级模式（低，前缀 advanced-）。
各类别涵盖的规则主题
响应式性能（关键）涉及 ref 与 reactive 的选择、shallowRef 用于大型不可变对象、computed 缓存、watch 与 watchEffect 的取舍、热路径中的 unref 调用、readonly 不可变数据。组件优化（关键）涉及 defineAsyncComponent 异步组件、函数式组件、keep-alive 缓存、懒加载 hydration、prop 校验、事件 emit 优化。打包体积与加载（高）涉及 tree-shaking、动态导入与代码分割、unplugin-auto-import、lodash 按需导入、以 day.js 替代 moment.js、图标导入优化。Composition API（中高）涉及 script setup、抽取 composables 复用逻辑、provide/inject、选择性暴露属性、reactive transform、自动导入。模板性能（中）涉及 v-once、v-memo、v-for key 优化、v-if 与 v-show 选择、slot 优化、自定义指令优化。状态管理（中）涉及 Pinia store 结构优化、store 组合模式、状态持久化、状态规范化、状态订阅、devtools 调试配置。生命周期优化（中低）涉及 onUnmounted 资源清理、setup 中的异步操作、watcher 与 effect 清理、生命周期中的 DOM 安全访问、SSR 生命周期差异。高级模式（低）涉及 Teleport、Suspense 与异步组件、自定义渲染器、编译器宏、Vue 插件开发。
框架集成
Vite 集成：利用 Vite 的快速 HMR 与构建优化，配置合理的分块策略，使用针对 Vue 的 Vite 插件优化。TypeScript 集成：利用 Vue 3 改进的 TypeScript 支持，使用恰当的类型定义以提升开发体验，为最佳构建性能配置 TypeScript。测试集成：将 Vue Test Utils 与 Composition API 配合使用，实现高效的组件测试策略，优化测试性能与可靠性。
如何使用
阅读单个规则文件获取详细说明与代码示例，例如 rules/reactivity-ref-vs-reactive.md、rules/component-async-components.md、rules/composition-script-setup.md。每个规则文件包含：该规则重要性的简要说明、带有解释的错误 Vue 3 代码示例、带有解释的正确 Vue 3 代码示例、性能影响与度量，以及额外上下文与 Vue 3 特定注意事项。
从 Vue 2 迁移
从 Vue 2 迁移时的特别注意事项：Composition API 与 Options API 模式差异；响应式系统的变化与优化；组件定义与注册的更新；事件处理与生命周期的变化。
性能监控
Vue 3 性能监控的工具与技术：Vue DevTools 集成；使用浏览器工具进行性能分析；打包分析与优化；运行时性能监控。
限制与未提供信息
该技能的具体收费方式、价格、平台与效果暂无提供，资料未说明。