vue的风格指南（必要的）

一、v-if与v-for不要放在同一个元素上

当 v-if 与 v-for 一块儿使用时，v-for 具备比 v-if 更高的优先级。永远不要把 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)。

使用计算属性咱们将会得到以下好处：

过滤后的列表只会在 users 数组发生相关变化时才被从新运算，过滤更高效。

使用 v-for="user in activeUsers" 以后，咱们在渲染的时候只遍历活跃用户，渲染更高效。

解藕渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。

经过将 v-if 移动到容器元素，咱们不会再对列表中的每一个用户检查 shouldShowUsers。取而代之的是，咱们只检查它一次，且不会在 shouldShowUsers 为否的时候运算 v-for。

 

二、组件名为多个单词

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

这样作能够避免跟现有的以及将来的 HTML 元素相冲突，由于全部的 HTML 元素名称都是单个单词的。例如：HolleWorld

 

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

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

当 data 的值是一个对象时，它会在这个组件的全部实例之间共享。想象一下，假如一个 TodoList 组件的数据是这样的：

data: {
    listTitle: '',
    todos: []
}

咱们可能但愿重用这个组件，容许用户维护多个列表 (好比分为购物、心愿单、平常事务等)。这时就会产生问题。由于每一个组件的实例都引用了相同的数据对象，更改其中一个列表的标题就会改变其它每个列表的标题。增删改一个待办事项的时候也是如此。

取而代之的是，咱们但愿每一个组件实例都管理其本身的数据。为了作到这一点，每一个实例必须生成一个独立的数据对象。在 JavaScript 中，在一个函数中返回这个对象就能够了：

data() {
    return {
        listTitle: '',
        todos: []
    }
}
//data() {   == data: function () {

 

四、Prop 定义应该尽可能详细。

在你提交的代码中，prop 的定义应该尽可能详细，至少须要指定其类型。

细致的 prop 定义有两个好处：

它们写明了组件的 API，因此很容易看懂组件的用法；

在开发环境下，若是向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。

 

五、为 v-for 设置键值

老是用 key 配合 v-for。

在组件上老是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。

 

六、为组件样式设置做用域

对于应用来讲，顶级 App 组件和布局组件中的样式能够是全局的，可是其它全部组件都应该是有做用域的。

这条规则只和单文件组件有关。你不必定要使用 scoped 特性。设置做用域也能够经过 CSS Modules，那是一个基于 class 的相似 BEM 的策略，固然你也可使用其它的库或约定。

无论怎样，对于组件库，咱们应该更倾向于选用基于 class 的策略而不是 scoped 特性。

这让覆写内部样式更容易：使用了常人可理解的 class 名称且没有过高的选择器优先级，并且不太会致使冲突。

若是你和其余开发者一块儿开发一个大型工程，或有时引入三方 HTML/CSS (好比来自 Auth0)，设置一致的做用域会确保你的样式只会运用在它们想要做用的组件上。

不止要使用 scoped 特性，使用惟一的 class 名能够帮你确保那些三方库的 CSS 不会运用在你本身的 HTML 上。好比许多工程都使用了 button、btn或 icon class 名，因此即使你不使用相似 BEM 的策略，添加一个 app 专属或组件专属的前缀 (好比 ButtonClose-icon) 也能够提供不少保护。

三种方式：

<template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>


<template>
  <button :class="[$style.button, $style.buttonClose]">X</button>
</template>

<!-- 使用 CSS Modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>


<template>
  <button class="c-Button c-Button--close">X</button>
</template>

<!-- 使用 BEM 约定 -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

为组件设置做用域

 

七、私有属性名

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

Vue 使用 _ 前缀来定义其自身的私有属性，因此使用相同的前缀 (好比 _update) 有覆写实例属性的风险。即使你检查确认 Vue 当前版本没有用到这个属性名，也不能保证和未来的版本没有冲突。

对于 $ 前缀来讲，其在 Vue 生态系统中的目的是暴露给用户的一个特殊的实例属性，因此把它用于私有属性并不合适。

不过，咱们推荐把这两个前缀结合为 $_，做为一个用户定义的私有属性的约定，以确保不会和 Vue 自身相冲突。