vue3-best-practices

Vue 3 最佳实践

Vue 3 应用的全面性能优化与开发指南。包含 8 个类别中的 45 条规则，并按影响程度排序，以指导自动重构和代码生成。

适用场景

以下情况可参考这些指南：

• 编写新的 Vue 3 组件或组合式函数
• 实现响应式数据和计算属性
• 检查代码中的性能问题
• 从 Vue 2 迁移到 Vue 3
• 优化打包体积或加载时间
• 使用状态管理（Pinia/Vuex）
• 在组件中实现异步操作

按优先级划分的规则类别

优先级	类别	影响	前缀
1	响应式性能	CRITICAL	reactivity-
2	组件优化	CRITICAL	component-
3	打包体积与加载	HIGH	bundle-
4	组合式 API	MEDIUM-HIGH	composition-
5	模板性能	MEDIUM	template-
6	状态管理	MEDIUM	state-
7	生命周期优化	LOW-MEDIUM	lifecycle-
8	高级模式	LOW	advanced-

快速参考

1. 响应式性能（CRITICAL）

• reactivity-ref-vs-reactive - 基本类型使用 ref，对象使用 reactive
• reactivity-shallow-ref - 大型不可变对象使用 shallowRef
• reactivity-computed-caching - 利用计算属性缓存
• reactivity-watch-vs-watcheffect - 选择合适的侦听器
• reactivity-unref-performance - 尽量减少热点路径中的 unref 调用
• reactivity-readonly-immutable - 不可变数据使用 readonly

2. 组件优化（CRITICAL）

• component-async-components - 重型组件使用 defineAsyncComponent
• component-functional - 简单的展示逻辑使用函数式组件
• component-keep-alive - 使用 keep-alive 缓存开销较大的组件
• component-lazy-hydration - 为非关键组件实现延迟水合
• component-prop-validation - 使用高效的 prop 验证
• component-emit-performance - 优化事件触发

3. 打包体积与加载（HIGH）

• bundle-tree-shaking - 组织导入语句，以实现最佳的 tree-shaking
• bundle-dynamic-imports - 使用动态导入进行代码拆分
• bundle-plugin-imports - 使用 unplugin-auto-import 改善开发体验
• bundle-lodash-imports - 单独导入 lodash 函数
• bundle-moment-alternatives - 使用 day.js 替代 moment.js
• bundle-icons-optimization - 优化图标的导入与使用

4. 组合式 API（MEDIUM-HIGH）

• composition-script-setup - 优先使用
• composition-composables-reuse - 将可复用逻辑提取为组合式函数
• composition-provide-inject - 使用 provide/inject 进行依赖注入
• composition-expose-selectively - 仅公开必要的属性
• composition-reactive-transform - 在适当情况下使用响应式转换
• composition-auto-import - 配置自动导入以改善开发体验

5. 模板性能（MEDIUM）

• template-v-once - 静态内容使用 v-once
• template-v-memo - 开销较大的列表渲染使用 v-memo
• template-key-optimization - 优化 v-for 的 key 以提升性能
• template-conditional-rendering - 根据情况选择 v-if 或 v-show
• template-slot-performance - 优化插槽和作用域插槽的用法
• template-directive-optimization - 创建高效的自定义指令

6. 状态管理（MEDIUM）

• state-pinia-optimization - 优化 Pinia store 结构
• state-store-composition - 使用 store 组合模式
• state-persistence - 实现高效的状态持久化
• state-normalization - 规范化复杂的状态结构
• state-subscription - 优化状态订阅
• state-devtools - 配置 devtools 以便调试

7. 生命周期优化（低至中）

• lifecycle-cleanup - 在 onUnmounted 中正确清理资源
• lifecycle-async-setup - 处理 setup 中的异步操作
• lifecycle-watchers-cleanup - 清理侦听器和副作用
• lifecycle-dom-access - 在生命周期钩子中安全访问 DOM
• lifecycle-ssr-considerations - 处理 SSR 生命周期差异

8. 高级模式（低）

• advanced-teleport-usage - 使用 Teleport 实现传送门模式
• advanced-suspense-async - 使用异步组件实现 Suspense
• advanced-custom-renderer - 在需要时创建自定义渲染器
• advanced-compiler-macros - 有效使用编译器宏
• advanced-plugin-development - 开发高效的 Vue 插件

框架集成

Vite 集成

• 利用 Vite 快速的 HMR 和构建优化
• 配置适当的代码块拆分策略
• 使用 Vite 插件进行 Vue 专属优化

TypeScript 集成

• 利用 Vue 3 改进后的 TypeScript 支持
• 使用适当的类型定义，提升 DX
• 配置 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 集成
• 使用浏览器工具进行性能分析
• Bundle 分析和优化
• 运行时性能监控