# vue 项目

# 生命周期

  1. 不在 mounted、created 之类的方法写逻辑,取 ajax 数据,
  2. 在 created 里面监听 Bus 事件

# vue方法放置顺序

name->components ->props ->data ->beforeCreate->created ->beforeMount ->mounted->activited ->beforeUpdate->updated->beforeDestroy->destroyed->beforeRouteEnter->beforeRouteUpdate->beforeRouteLeave->metods->filter->computed ->watch

# method 自定义方法命名(建议)

  1. 动宾短语(good:jumpPage、openCarInfoDialog)(bad:go、nextPage、show、open、login)
  2. ajax 方法以 get、post 开头,以 data 结尾(good:getListData、postFormData)(bad:takeData、confirmData、getList、postForm)
  3. 事件方法以 on 开头(onTypeChange、onUsernameInput)
  4. 尽量使用常用单词开头(set、get、open、close、jump)
  5. 驼峰命名(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

# 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

# 验证组件的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

# 自定义事件名称

自定义事件名称,如果有多个单词组成,使用连字符命名法。

this.$emit('current-change');
1

# 其他注意事项:

  1. 组件的name要写
  2. v-for v-if 避免一起使用 循环 v-for 加key
  3. 建议vue组件不要超过400行,既然是组件化开发,那么如果一个组件文件体积太大,存在几十个方法、几十个 data数据,那就说明这个组件大概率包含的功能点太多,是可以被继续细化出多个单一功能的子组件。每一个vue组件首先必须专注于解决一个单一的问题,独立的,可复用的,微小的和可测试的。 如果你的组件做了太多的事或是变得臃肿,将其拆成更小的组件并保持单一的原则。
  4. 每个函数不要超过 100行,不要让一个方法函数包含过多的逻辑功能,函数包含过多逻辑,容易混乱,遵循函数功能单一原则
  5. 与模板渲染无关的变量不要放在data里
  6. 页面计算属性,逻辑过多不要写在template里,用computed
  7. 与页面上与业务无关的工具方法应该放在工具方法里