必须遵守
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.其它
控制台输出，用完即删除或注释
