vue 开发规范

这个技能能帮你做什么

如果你在用 Vue 3 开发前端项目，这个技能能帮你建立规范的开发实践：

• 组件架构设计 —— 区分容器组件和展示组件，让数据流更清晰
• Composition API 使用 —— 用好 ref、reactive、computed 等响应式 API，写出更灵活的组件逻辑
• 自定义组合函数 —— 提取可复用的逻辑到 composables 中，减少代码重复
• 状态管理 —— 用 Pinia 管理全局状态，区分本地状态和共享状态
• 路由配置 —— 设计路由结构，配置导航守卫，处理动态参数
• 性能优化 —— 掌握 v-memo、懒加载、KeepAlive 等性能优化手段
• Nuxt 开发 —— SSR 服务端渲染、数据获取、自动导入等 Nuxt 特有模式
• 组件测试 —— 用 Vitest 和 Vue Test Utils 测试组件行为

什么时候用

• 新建 Vue 项目 —— 搭建项目结构，确定组件组织方式
• 重构 Vue 2 项目 —— 从 Options API 迁移到 Composition API
• 设计组件 —— 不确定组件怎么拆分、数据怎么传递
• 状态管理 —— 页面间需要共享数据，考虑用 Pinia 还是其他方案
• 性能问题 —— 页面卡顿、渲染慢，需要优化性能
• 需要 SSR —— 要做服务端渲染，用 Nuxt 框架开发

主要覆盖哪些场景

1. 项目结构 —— 按功能组织目录，合理划分组件层级
2. 组件设计 —— Props 定义、事件传递、插槽使用
3. 组合函数 —— 提取复用逻辑，管理副作用和清理
4. 状态管理 —— Pinia Store 设计、Actions、Getters
5. 路由导航 —— 路由配置、参数传递、权限守卫
6. 模板语法 —— v-if/v-show、v-for、事件处理、双向绑定
7. 性能优化 —— 渲染优化、懒加载、缓存策略
8. Nuxt 模式 —— SSR、数据获取、服务端路由
9. 组件测试 —— 挂载组件、触发事件、验证输出

怎么用

在 Vue 开发中遇到以下情况，都可以询问这个技能：

• "这个组件怎么拆分比较好？"
• "数据怎么在组件间传递？"
• "Composition API 和 Options API 怎么选？"
• "Pinia Store 怎么设计？"
• "路由守卫怎么配置？"
• "页面性能怎么优化？"
• "Nuxt 的 SSR 怎么做？"

核心原则

• 组合优于继承 —— 用 composables 替代 mixins，逻辑更清晰
• 显式数据流 —— Props 向下传递，事件向上通知，数据流向明确
• 不可变 Props —— 不直接修改传入的 Props，通过事件通知父组件修改
• 局部优先 —— 能用本地状态解决的问题，不用全局状态
• 类型安全 —— 用 TypeScript 定义 Props 和事件类型，减少运行时错误
• 性能意识 —— 避免不必要的重渲染，合理使用缓存和懒加载

适用场景

适合的情况：

• Vue 3 + TypeScript 项目
• 需要 Composition API 的复杂组件
• 中大型项目需要状态管理
• 需要 SSR 的 Nuxt 项目
• 需要从 Vue 2 迁移到 Vue 3 的项目

不适合的情况：

• 纯静态页面，不需要交互
• 非 Vue 技术栈（如 React、Angular）
• 简单的展示页面，不需要组件化
• 已经用 Options API 且不需要重构的老项目