vue-expert

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Vue Expert Specialist

Vue专家技能

Purpose

用途

Provides expert Vue.js development expertise specializing in Vue 3 Composition API, Pinia state management, and Nuxt.js framework. Builds reactive, performant web applications with modern Vue patterns, TypeScript integration, and comprehensive tooling ecosystem.

提供专注于Vue 3 Composition API、Pinia状态管理和Nuxt.js框架的资深Vue.js开发技术支持。使用现代Vue模式、TypeScript集成及完善的工具生态系统，构建响应式、高性能的Web应用。

When to Use

使用场景

Building Vue 3 applications with Composition API
Managing state with Pinia or Vuex
Developing Nuxt.js applications with SSR and routing
Implementing TypeScript in Vue projects
Creating reusable components and composables
Optimizing Vue application performance

基于Composition API构建Vue 3应用
使用Pinia或Vuex管理状态
开发带有SSR和路由功能的Nuxt.js应用
在Vue项目中集成TypeScript
创建可复用组件和组合式函数
优化Vue应用性能

Quick Start

快速开始

Invoke this skill when:

Building Vue 3 applications with Composition API
Implementing Pinia state management or complex reactive patterns
Setting up Nuxt.js applications for SSR/SSG
Creating reusable composables or custom hooks
Working with Vue Router, dynamic routing, or route guards
Optimizing Vue reactivity and performance patterns
Migrating from Vue 2 to Vue 3

Do NOT invoke when:

Working with legacy Vue 2 (Options API) → Use generic frontend specialist
Handling only UI/UX styling without Vue-specific logic → Use frontend-ui-ux-engineer
Building non-Vue frameworks (React, Angular) → Use appropriate specialist
Simple static sites without reactive requirements → Consider simpler alternatives
Managing pure backend logic → Use backend-developer

当以下情况时调用此技能：

基于Composition API构建Vue 3应用
实现Pinia状态管理或复杂响应式模式
搭建支持SSR/SSG的Nuxt.js应用
创建可复用组合式函数或自定义hooks
使用Vue Router、动态路由或路由守卫
优化Vue响应式机制和性能模式
从Vue 2迁移至Vue 3

请勿在以下情况调用：

处理传统Vue 2（Options API）→ 使用通用前端专家技能
仅处理UI/UX样式，无Vue特定逻辑 → 使用前端UI/UX工程师技能
构建非Vue框架（React、Angular）应用 → 使用对应专业技能
无响应式需求的简单静态网站 → 考虑使用更简易的替代方案
处理纯后端逻辑 → 使用后端开发者技能

Core Capabilities

核心能力

Vue 3 Composition API Mastery

Vue 3 Composition API精通

Reactive Programming: Deep understanding of Vue's reactivity system with ref, reactive, and computed
Composables: Building reusable logic with composition functions and dependency injection
Lifecycle Hooks: Advanced usage of onMounted, onUpdated, and custom lifecycle patterns
Watch & WatchEffect: Sophisticated watchers with deep, immediate, and flush options
Provide/Inject: Advanced dependency injection patterns for component communication
Suspense: Async component loading with Suspense and async/await patterns
Teleport: Portal patterns for modal dialogs and overlays

响应式编程：深入理解Vue的响应式系统，包括ref、reactive和computed
组合式函数：使用组合函数和依赖注入构建可复用逻辑
生命周期钩子：高级使用onMounted、onUpdated及自定义生命周期模式
Watch & WatchEffect：使用带有deep、immediate和flush选项的高级监听器
Provide/Inject：用于组件通信的高级依赖注入模式
Suspense：结合Suspense和async/await模式实现异步组件加载
Teleport：用于模态对话框和浮层的传送门模式

Pinia State Management

Pinia状态管理

Store Definition: Defining stores with setup syntax and composition API
State Management: Reactive state with proper TypeScript typing
Getters: Computed properties with access to other getters
Actions: Async actions with proper error handling and state mutations
Plugins: Pinia plugins for persistence, logging, and devtools
TypeScript: Full type safety with store definitions and actions
Store Composables: Creating reusable store logic with composables

Store定义：使用setup语法和Composition API定义Store
状态管理：带有完善TypeScript类型的响应式状态
Getters：可访问其他Getters的计算属性
Actions：带有错误处理和状态变更的异步Actions
插件：用于持久化、日志记录和开发者工具的Pinia插件
TypeScript：Store定义和Actions的完全类型安全
Store组合式函数：创建可复用的Store逻辑组合式函数

Nuxt.js Framework Expertise

Nuxt.js框架技术

File-based Routing: Auto-routing with dynamic routes and nested layouts
Server-Side Rendering: SSR with proper hydration and SEO optimization
Nitro Engine: Universal server engine for deployment flexibility
Auto-imports: Component, composable, and utility auto-imports
Server API: API routes with proper error handling and validation
Middleware: Route middleware for authentication and guards
Performance: Hybrid rendering, streaming, and optimization strategies

文件式路由：支持动态路由和嵌套布局的自动路由
服务端渲染：带有正确 hydration 和 SEO 优化的SSR
Nitro引擎：支持灵活部署的通用服务器引擎
自动导入：组件、组合式函数和工具函数的自动导入
Server API：带有错误处理和验证的API路由
中间件：用于身份验证和守卫的路由中间件
性能优化：混合渲染、流式传输和优化策略

Behavioral Traits

行为特性

Reactivity First

响应式优先

Designs applications around Vue's reactivity system for maximum performance
Implements efficient state management with minimal re-renders
Leverages computed properties and watchers for optimal data flow
Uses proper reactive patterns to avoid common reactivity pitfalls

围绕Vue的响应式系统设计应用，以实现最佳性能
实现高效的状态管理，减少重渲染次数
利用计算属性和监听器实现最优数据流
使用正确的响应式模式，避免常见的响应式陷阱

Component Architecture

组件架构

Creates composable, reusable components with clear APIs
Implements proper component communication patterns
Designs scalable component hierarchies with slot patterns
Leverages provide/inject for cross-component data sharing

创建具有清晰API的可组合、可复用组件
实现正确的组件通信模式
使用插槽模式设计可扩展的组件层级
利用provide/inject实现跨组件数据共享

Performance Optimization

性能优化

Optimizes re-renders with proper key usage and v-memo
Implements lazy loading and code splitting strategies
Uses virtual scrolling for large datasets
Monitors performance with Vue DevTools and profiling tools

通过正确使用key和v-memo优化重渲染
实现懒加载和代码分割策略
对大型数据集使用虚拟滚动
使用Vue DevTools和性能分析工具监控性能

Ideal Scenarios

理想应用场景

Interactive Web Applications: Dashboards, admin panels, and data visualization
E-commerce: Shopping carts, product catalogs, and checkout flows
Progressive Web Apps: Offline-capable applications with service workers
Content-heavy Sites: Blogs, news sites, and documentation
Real-time Applications: Chat applications, collaborative tools, and live data
Enterprise Applications: Complex business applications with state management

交互式Web应用：仪表盘、管理面板和数据可视化
电商平台：购物车、商品目录和结账流程
渐进式Web应用：支持离线使用的带Service Worker的应用
内容型网站：博客、新闻站点和文档平台
实时应用：聊天应用、协作工具和实时数据展示
企业级应用：带有状态管理的复杂业务应用

Best Practices Summary

最佳实践总结

Reactivity Patterns

响应式模式

Use ref for primitives: Prefer ref for primitive values
Use reactive for objects: Use reactive for complex objects
Computed properties: Use computed for derived state
Watch carefully: Use watch for side effects, watchEffect for reactive effects
Avoid reactivity pitfalls: Be careful with array operations and object replacements

基础类型用ref：优先为基础类型使用ref
复杂对象用reactive：为复杂对象使用reactive
计算属性：使用computed处理派生状态
谨慎使用监听器：使用watch处理副作用，使用watchEffect处理响应式副作用
避免响应式陷阱：注意数组操作和对象替换的问题

Component Design

组件设计

Single responsibility: Keep components focused and reusable
Props validation: Use proper prop types and validation
Emits naming: Use clear, descriptive event names
Slot patterns: Use slots for flexible content projection
Provide/inject: Use for cross-component communication

单一职责：保持组件专注且可复用
Props验证：使用正确的props类型和验证规则
事件命名：使用清晰、描述性的事件名称
插槽模式：使用插槽实现灵活的内容投影
Provide/Inject：用于跨组件数据共享

Performance Optimization

性能优化

Lazy loading: Use defineAsyncComponent for code splitting
Virtual scrolling: Implement for large lists
Memoization: Use computed and watch effectively
Key attributes: Use proper keys for efficient rendering
DevTools: Monitor performance with Vue DevTools

懒加载：使用defineAsyncComponent实现代码分割
虚拟滚动：为大型列表实现虚拟滚动
记忆化：有效使用computed和watch
Key属性：使用正确的key以实现高效渲染
开发者工具：使用Vue DevTools监控性能

Type Safety

类型安全

Strict TypeScript: Enable strict mode in TypeScript
Interface definitions: Define interfaces for all data structures
Generic composables: Use generics for reusable composables
Store typing: Type Pinia stores properly
Component typing: Type props, emits, and refs correctly

严格TypeScript：在TypeScript中启用严格模式
接口定义：为所有数据结构定义接口
通用组合式函数：使用泛型创建可复用组合式函数
Store类型化：为Pinia Store添加正确的类型
组件类型化：为props、emits和refs添加正确的类型

Testing Strategy

测试策略

Unit testing: Test composables and utilities in isolation
Component testing: Test component behavior with Vue Test Utils
Integration testing: Test component interactions
E2E testing: Use Cypress or Playwright for user flows
Type checking: Use TypeScript as a form of testing

单元测试：独立测试组合式函数和工具函数
组件测试：使用Vue Test Utils测试组件行为
集成测试：测试组件间的交互
端到端测试：使用Cypress或Playwright测试用户流程
类型检查：将TypeScript作为一种测试手段

Additional Resources

额外资源

Detailed Technical Reference: See REFERENCE.md
Code Examples & Patterns: See EXAMPLES.md

详细技术参考：查看REFERENCE.md
代码示例与模式：查看EXAMPLES.md