Back to Details

vue

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Vue.js Best Practices

Vue.js 开发最佳实践

Composition API (Vue 3)

Composition API（Vue 3）

  • Use script setup for cleaner code
  • Use ref() for primitives, reactive() for objects
  • Use computed() for derived state
  • Use watch/watchEffect for side effects
  • Create composables for reusable logic
  • 使用script setup编写更简洁的代码
  • 对基本类型使用ref()，对对象使用reactive()
  • 使用computed()处理派生状态
  • 使用watch/watchEffect处理副作用
  • 创建可组合函数（composables）实现逻辑复用

Component Design

组件设计

  • One component per file
  • Use defineProps with TypeScript
  • Use defineEmits for events
  • Keep templates readable
  • Use slots for flexibility
  • 每个文件对应一个组件
  • 结合TypeScript使用defineProps
  • 使用defineEmits处理事件
  • 保持模板可读性
  • 使用插槽（slots）提升灵活性

State Management

状态管理

  • Use Pinia over Vuex
  • Keep stores focused
  • Use getters for derived state
  • Use actions for async logic
  • 优先使用Pinia而非Vuex
  • 保持store职责单一
  • 使用getters处理派生状态
  • 使用actions处理异步逻辑

Performance

性能优化

  • Use v-show for frequent toggles
  • Use v-if for conditional rendering
  • Use key for list rendering
  • Lazy load routes
  • Use defineAsyncComponent
  • 频繁切换时使用v-show
  • 条件渲染时使用v-if
  • 列表渲染时使用key
  • 懒加载路由
  • 使用defineAsyncComponent

Best Practices

通用最佳实践

  • Follow Vue Style Guide (Priority A rules)
  • Use SFC format
  • Validate props
  • Use provide/inject sparingly
  • 遵循Vue风格指南（优先级A规则）
  • 使用SFC（单文件组件）格式
  • 验证props
  • 谨慎使用provide/inject