Vue最佳实践文章学习

1.Vue中$on, $emit

• $emit(event, 参数）：触发当前组件上的event事件并将参数传给回调函数。
  （传递事件）
  可以同时传递对个参数
• $on(event)：监听当前组件上的自定义event事件。
  （捕获事件）
  可以同时监听多个事件

注：在组件被销毁的时候，destoryed钩子中，对 $on 绑定的事件，$off进行清除，防止内存泄露

2.自定义事件kebab-case

3.避免在watch和created中调用同一个函数

使用场景：在组件初始化和属性更新的时候触发同一个方法

watch: {
  myProperty() {
    this.doSomething();
  }
},
created() {
  this.doSomething();
},
methods: {
  doSomething() {
     console.log('doing something...');
  }
}

可以将所有的功能都放在watch里，避免代码重复，并且在初始化时也会触发

watch: {
  user: {
    immediate: true, // forcing handler on initial status
    handler() {
      this.doSomething();
    }
  }
},
methods: {
  doSomething() {
     console.log('doing something...');
  }
}

4.始终在使用v-for的时候绑定:key

在模板循环中添加:key，若不添加，会导致难以发现的错误，特别是在动画中

5.为mixin添加$_

对于import的mixin函数，相同名称属性，组件会占据更高的优先级，所有为mixin函数加上$_前缀。
注：_是Vue私密属性保留字；$是Vue生态系统的保留字

6.props命名

props命名中采用驼峰，模板标签中自动使用短横线

7.不要在相同元素上使用v-if

即同时使用v-for和v-if