vue.js代码规范

必须遵守

1.组件的data必须是一个函数

例子

export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

反例

export default {
  data: {
    foo: 'bar'
  }
}

2.为 v-for 设置键值

例

<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>

3 避免 v-if 和 v-for 用在一起

例

<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>

建议

1.prop定义尽量详细

例子

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

反例

props: ['status']

2.尽量使用组件化开发思想

   提高开发效率 
   方便重复使用
   提升整个项目的可维护性
   便于协同开发
   低耦合。

3.vue文件方法声明顺序

    - components   
    - props    
    - data     
    - created
    - mounted
    - activited
    - update
    - beforeRouteUpdate
    - metods   
    - filter
    - computed
    - watc

4.注释

1.公共组件使用说明
2.各组件中重要函数或者类说明
3.复杂的业务逻辑处理说明
4.特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、使用了某种算法或思路等需要进行注释描述

5.编码规范

    使用ES6风格编码，例如箭头函数
    定义变量使用let ,定义常量使用const
    使用export ，import 模块化

6.命名规范

1.vue组件名遵从驼峰形式，第一个字母大写
2.方法名、参数名、成员变量、局部变量遵从驼峰形式，第一个字母必须小写
3.常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长；
4.私有方法，方法名前面加下划线

7.其它

控制台输出，用完即删除或注释