vue-风格规范指南---规则A

如果在工程中使用 Vue，为了回避错误、小纠结和反模式，该指南是份不错的参考。不过也不确信风格指南的所有内容对于所有的团队或工程都是理想的。

规则归类

规则A 必要的

这些规则会帮你规避错误，所以学习并接受它们带来的全部代价吧。这里面可能存在例外，但应该非常少，且只有你同时精通 JavaScript 和 Vue 才可以这样做。

组件名为多个单词 ^必要

组件名应该始终是多个单词的，根组件 App 除外。

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

ch-img1.png

组件数据 ^必要

组件的 data 必须是一个函数。

当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。

ch-img2.png
ch-img3.png
ch-img4.png

Prop 定义 ^必要

Prop 定义应该尽量详细。

在你提交的代码中，prop 的定义应该尽量详细，至少需要指定其类型。
细致的 prop 定义有两个好处：

• 它们写明了组件的 API，所以很容易看懂组件的用法；
• 在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。

ch-image5.png

v-for 设置键值 ^必要

总是用 key 配合 v-for。

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

ch-image6.png

避免 v-if 和 v-for 用在一起 ^必要

永远不要把 v-if 和 v-for 同时用在同一个元素上。

一般我们在两种常见的情况下会倾向于这样做：

• 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

• 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)。
  

  image.png
  image.png

有属性名 ^必要

在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)。

详解
Vue 使用 _ 前缀来定义其自身的私有属性，所以使用相同的前缀 (比如 update) 有覆写实例属性的风险。即便你检查确认 Vue 当前版本没有用到这个属性名，也不能保证和将来的版本没有冲突。
对于，作为一个用户定义的私有属性的约定，以确保不会和 Vue 自身相冲突。

image.png
image.png