Vue风格指南

风格指南官方文档

一、优先级A

1、组件名为多个单词

避免跟html元素相冲突。根组件除外。

2、组件data必须是一个函数。

使每个组件都管理自己的数据。

3、prop定义应该尽量详细，至少要指定其类型。

【最好的做法】
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

4、为v-for设置键值key。

以便维护内部组件及其子数的状态。

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

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，所以如下代码：

  

    {{ user.name }}
  

运算顺序：

this.users.map(fuction(user){
  if (user.isActive) {
    return user.name
  }
})

这样就导致，哪怕只渲染出小部分用户的元素，也得在每次重新渲染的时候遍历整个列表，不论活跃用户是否发生改变。

• 修改方法一：
  所以，最好将 v-if 改成一个计算属性，返回筛选好的值，v-for在返回值的基础上进行遍历。

computed:{
  activeUsers: function(){
    return this.users.filter(function(user){
      return user.isActive
    })
  }
}

  

     {{ user.name }}
  

这样子的好处是：
1、过滤后的列表 activeUsers只会在users列表发生变化时才被重新运算，过滤更加高效。
2、使用了v-for = “user in activeUsers”之后，我们在渲染的时候只遍历activeUser，渲染更高效。
3、解耦渲染曾的逻辑，可维护性更强。

• 修改方法二：
  把v-if 上移一层到容器元素，这样就不会对列表中的每一个用户检查isActive，且不会再isActive为否的时候运算v-for。

  

    {{ user.name }}
  

6、为组件样式设置作用域

根组件App和布局组件中的样式可以是全局的，但是其他组件都应该是有作用域的。

使用scoped属性，还可以使用唯一的class名，这样不会和第三方库的css不会运用到自己的html上，或者也可以选择添加一个app专属或者组件专属的前缀。

CSS Modules 用法教程-阮一峰

7、私有属性名

在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀。

• Vue使用_ 来定义自身的私有属性，如果单使用_有覆盖实例属性的风险。
• Vue使用$前缀，来规定其自身的实例属性。
• 将 $、_、一个自定义名结合，就可以作为用户定义的私有属性的约定，不会和Vue自身冲突。

var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}