# vue 项目
# 生命周期
- 不在 mounted、created 之类的方法写逻辑,取 ajax 数据,
- 在 created 里面监听 Bus 事件
# vue方法放置顺序
name->components ->props ->data ->beforeCreate->created ->beforeMount ->mounted->activited ->beforeUpdate->updated->beforeDestroy->destroyed->beforeRouteEnter->beforeRouteUpdate->beforeRouteLeave->metods->filter->computed ->watch
# method 自定义方法命名(建议)
- 动宾短语(good:jumpPage、openCarInfoDialog)(bad:go、nextPage、show、open、login)
- ajax 方法以 get、post 开头,以 data 结尾(good:getListData、postFormData)(bad:takeData、confirmData、getList、postForm)
- 事件方法以 on 开头(onTypeChange、onUsernameInput)
- 尽量使用常用单词开头(set、get、open、close、jump)
- 驼峰命名(good: getListData)(bad: get_list_data、getlistData)
为了更好的阅读体验,也是为了避免过渡注释,最好的注释就是让代码自己“说出”自己的作用,即命名要有规律性
例如,用于存储数组的变量以 List作为名字后缀,用于某种信息的对象变量以 Info作为名字后缀,用于判断某种逻辑的变量以 is作为前缀
const namesList = ['xiaoming', 'xiaohong']
const userInfo = {
name: 'John',
age: 20,
gender: 'male'
}
const isEven = 10 % 2 === 0
1
2
3
4
5
6
7
2
3
4
5
6
7
# Vue 组件命名
有意义的: 不过于具体,也不过于抽象
简短: 2 到 3 个单词
具有可读性: 以便于沟通交流
组件文件名使用连字符命名:user-list.vue
组件内name属性使用大驼峰命名:{ name: 'UserList' }
template中组件标签使用连字符:
<!-- 推荐 -->
<app-header></app-header>
<user-list></user-list>
<range-slider></range-slider>
<!-- 避免 -->
<btn-group></btn-group><!-- 虽然简短但是可读性差. 使用 `button-group` 替代 -->
<ui-slider></ui-slider><!-- ui 前缀太过于宽泛,在这里意义不明确 -->
<slider></slider><!-- 与自定义元素规范不兼容 -->
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 验证组件的props
提供默认值。
使用 type 属性校验类型。
props的key使用小驼峰命名法。
使用 props 之前先检查该 prop 是否存在。
当prop为多种类型时应该使用数组表示。
在标签中如果prop有多个单词组成,应当使用连字符。
props: {
size: {
type: Number,
default:10
},
id: {
type: [Number, String],
default: ''
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 自定义事件名称
自定义事件名称,如果有多个单词组成,使用连字符命名法。
this.$emit('current-change');
1
# 其他注意事项:
- 组件的name要写
- v-for v-if 避免一起使用 循环 v-for 加key
- 建议vue组件不要超过400行,既然是组件化开发,那么如果一个组件文件体积太大,存在几十个方法、几十个 data数据,那就说明这个组件大概率包含的功能点太多,是可以被继续细化出多个单一功能的子组件。每一个vue组件首先必须专注于解决一个单一的问题,独立的,可复用的,微小的和可测试的。 如果你的组件做了太多的事或是变得臃肿,将其拆成更小的组件并保持单一的原则。
- 每个函数不要超过 100行,不要让一个方法函数包含过多的逻辑功能,函数包含过多逻辑,容易混乱,遵循函数功能单一原则
- 与模板渲染无关的变量不要放在data里
- 页面计算属性,逻辑过多不要写在template里,用computed
- 与页面上与业务无关的工具方法应该放在工具方法里