用途
Vue Expert 是一个专注于 Vue.js 开发的专家型技能，提供 Vue 3 Composition API、Pinia 状态管理和 Nuxt.js 框架方面的开发能力，用于构建响应式、高性能的 Web 应用，并结合现代 Vue 模式、TypeScript 集成与完整的工具生态。
主要能力
Vue 3 Composition API
- 响应式编程：深入理解 Vue 响应式系统，使用 ref、reactive 和 computed。
- 组合式函数（Composables）：使用组合函数和依赖注入构建可复用逻辑。
- 生命周期钩子：高级使用 onMounted、onUpdated 及自定义生命周期模式。
- Watch 与 WatchEffect：支持 deep、immediate 和 flush 选项的复杂侦听器。
- Provide/Inject：用于组件通信的高级依赖注入模式。
- Suspense：使用 Suspense 和 async/await 模式进行异步组件加载。
- Teleport：用于模态对话框和覆盖层的传送门模式。
Pinia 状态管理
- Store 定义：使用 setup 语法和 Composition API 定义 store。
- 状态管理：具备正确 TypeScript 类型的响应式状态。
- Getters：可访问其他 getter 的计算属性。
- Actions：具备正确错误处理和状态变更的异步 action。
- 插件：用于持久化、日志和 devtools 的 Pinia 插件。
- TypeScript：store 定义和 action 的完整类型安全。
- Store 组合式函数：使用组合式函数创建可复用的 store 逻辑。
Nuxt.js 框架
- 基于文件的路由：自动路由，支持动态路由和嵌套布局。
- 服务端渲染：具备正确水合和 SEO 优化的 SSR。
- Nitro 引擎：用于部署灵活性的通用服务端引擎。
- 自动导入：组件、组合式函数和工具的自动导入。
- 服务端 API：具备正确错误处理和验证的 API 路由。
- 中间件：用于认证和守卫的路由中间件。
- 性能：混合渲染、流式传输和优化策略。
使用方式
在以下情况调用此技能：
- 使用 Composition API 构建 Vue 3 应用
- 实现 Pinia 状态管理或复杂响应式模式
- 为 SSR/SSG 设置 Nuxt.js 应用
- 创建可复用的组合式函数或自定义 hooks
- 处理 Vue Router、动态路由或路由守卫
- 优化 Vue 响应式和性能模式
- 从 Vue 2 迁移到 Vue 3
不要在以下情况调用：
- 处理旧版 Vue 2（Options API）→ 使用通用前端专家
- 仅处理 UI/UX 样式而无 Vue 特定逻辑 → 使用 frontend-ui-ux-engineer
- 构建非 Vue 框架（React、Angular）→ 使用相应专家
- 无响应式需求的简单静态站点 → 考虑更简单的替代方案
- 管理纯后端逻辑 → 使用 backend-developer
适用场景
- 交互式 Web 应用：仪表盘、管理面板和数据可视化
- 电子商务：购物车、产品目录和结账流程
- 渐进式 Web 应用：具备 service worker 的离线应用
- 内容密集型站点：博客、新闻站点和文档
- 实时应用：聊天应用、协作工具和实时数据
- 企业应用：带状态管理的复杂业务应用
行为特征
- 响应式优先：围绕 Vue 响应式系统设计应用以获得最大性能；实现高效状态管理以减少重渲染；利用计算属性和侦听器优化数据流；使用正确的响应式模式避免常见陷阱。
- 组件架构：创建可组合、可复用且 API 清晰的组件；实现正确的组件通信模式；使用插槽模式设计可扩展的组件层级；利用 provide/inject 进行跨组件数据共享。
- 性能优化：通过正确的 key 使用和 v-memo 优化重渲染；实现懒加载和代码分割策略；对大数据集使用虚拟滚动；使用 Vue DevTools 和性能分析工具监控性能。
最佳实践摘要
- 响应式模式：原始值优先使用 ref；复杂对象使用 reactive；派生状态使用 computed；副作用使用 watch，响应式效果使用 watchEffect；注意数组操作和对象替换等响应式陷阱。
- 组件设计：单一职责；正确的 prop 类型和验证；清晰描述性的事件命名；使用插槽进行灵活内容投影；使用 provide/inject 进行跨组件通信。
- 性能优化：使用 defineAsyncComponent 进行代码分割；为大型列表实现虚拟滚动；有效使用 computed 和 watch 进行记忆化；使用正确的 key 实现高效渲染；使用 Vue DevTools 监控性能。
- 类型安全：启用 TypeScript 严格模式；为所有数据结构定义接口；为可复用组合式函数使用泛型；正确为 Pinia store 标注类型；正确为 props、emits 和 refs 标注类型。
- 测试策略：对组合式函数和工具进行单元测试；使用 Vue Test Utils 进行组件测试；进行组件交互的集成测试；使用 Cypress 或 Playwright 进行用户流程的 E2E 测试；将 TypeScript 类型检查作为一种测试形式。
限制
资料未提供该技能的具体收费、价格、平台支持范围、安装命令或使用步骤等细节，暂未提供。