优先级 A 的规则：必要的 (规避错误)

这些规则有助于防止错误，因此不惜一切代价学习并遵守它们。例外情况可能存在，但应该非常罕见，并且只能由具有 JavaScript 和 Vue 专业知识的人员制作。

组件名为多个单词

组件名应该始终由多个单词组成，除了根组件App，以及、之类的 Vue 内置组件。

这样做可以避免与现有以及未来的 HTML 元素产生冲突，因为所有的 HTML 元素名称都是单个单词的。

反面例子

正面例子

Prop 定义应尽量详细

在提交的代码中，prop 的定义应该尽量详细，至少指定其类型。

反面例子

// This is only OK when prototyping
props: ['status']

正面例子

props: {
  status: String
}
// Even better!
props: {
  status: {
    type: String,
    required: true,

    validator: value => {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].includes(value)
    }
  }
}

为 v-for 设置 key 值

始终以key配合v-for。在组件上必须始终以 key 配合 v-for，以便维护内部组件及其子树的状态。即使对于元素，维持可预测的行为也是一种好的做法。例如动画中的对象固化(object constancy)。

反面例子

• {{ todo.text }}

正面例子

• {{ todo.text }}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com