Vue前端开发规范 _Vue前端

基于Vue官方风格指南整理
一、强制
1. 组件名为多个单词

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

正例：
export default { name: 'TodoItem', // ...}复制代码反例：
export default { name: 'Todo', // ...}复制代码2. 组件数据

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

正例：
// In a .vue fileexport default { data () { return { foo: 'bar' } }}// 在一个 Vue 的根实例上直接使用对象是可以的，// 因为只存在一个这样的实例。new Vue({ data: { foo: 'bar' }})复制代码反例：
export default { data: { foo: 'bar' }}复制代码3. Prop定义

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

正例：
props: { status: String}// 更好的做法！props: { status: { type: String, required: true, validator: function (value) { return [ 'syncing', 'synced', 'version-conflict', 'error' ].indexOf(value) !== -1 } }}复制代码反例：
// 这样做只有开发原型系统时可以接受props: ['status']复制代码4. 为v-for设置键值

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

正例：
<ul> <li v-for="todo in todos" :key="todo.id" > {{ todo.text }} </li></ul>复制代码反例：
<ul> <li v-for="todo in todos"> {{ todo.text }} </li></ul>复制代码5.避免 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) 。

正例：
<ul v-if="shouldShowUsers"> <li v-for="user in users" :key="user.id" > {{ user.name }} </li></ul>复制代码反例：
<ul> <li v-for="user in users" v-if="shouldShowUsers" :key="user.id" > {{ user.name }} </li></ul>复制代码6. 为组件样式设置作用域

对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。
这条规则只和单文件组件有关。你不一定要使用 scoped 特性。设置作用域也可以通过 css Modules，那是一个基于 class 的类似 BEM 的策略，当然你也可以使用其它的库或约定。
不管怎样，对于组件库，我们应该更倾向于选用基于 class 的策略而不是 scoped 特性。
这让覆写内部样式更容易：使用了常人可理解的 class 名称且没有太高的选择器优先级，而且不太会导致冲突。

正例：
<template> <button class="c-Button c-Button--close">X</button></template><style>.c-Button { border: none; border-radius: 2px;}.c-Button--close { background-color: red;}</style>复制代码反例：
<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><style scoped>.button { border: none; border-radius: 2px;}.button-close { background-color: red;}</style>复制代码二、强烈推荐（增强可读性）
1. 组件文件