Vue 组件最佳实践指南

组件设计原则

1. 单一职责

每个组件应该只做一件事，并且做好这件事：

<template>
  <div>
    <user-profile></user-profile>
    <order-list></order-list>
    <payment-form></payment-form>
  </div>
</template>


<template>
  <div>
    <user-dashboard></user-dashboard>
  </div>
</template>

2. Props 验证

始终为组件的 props 提供详细的验证：

// 不推荐
props: ['status']

// 推荐
props: {
  status: {
    type: String,
    required: true,
    validator: value => ['active', 'inactive'].includes(value)
  }
}