Vue风格指南（A）

优先级A（必要的）

组件名

除了App外，其他组件名应为多单词组成的，因为HTML元素都是单单词的，这样可以避免冲突。
例如：
todo-item
TodoItem

组件中的`data`必须是一个返回一个对象的函数。

因为组件可以有多个实例，不同实例之间数据应该是独立的，如果data是对象，那么所有同一个组件的所有实例的数据都是相同的。不同函数的作用域相互独立，因此只要data由一个函数返回一个对象，就可以实现多个实例的相互独立。

例子：

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

Prop定义

Prop的定义要尽量详尽，至少指定其类型。

不推荐：

props:['title']

为`v-for`设置键值

总是用key配合v-for

为组件样式设置作用于

顶级App组件的样式可以是全局的，而其他的组件样式应该要设置作用域。

方法：
scoped、css modules、”BEM约定“或者单纯加上自定义前缀pro-className。

例子：
不推荐：

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

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

推荐：

<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 自身相冲突。

不推荐：
updata: function(){}
_updata: function(){}
$updata: function(){}

推荐：
$_nameSpace_updata: function(){}

最后编辑于：2018.11.18 22:33:45