Vue规范总结

对象属性添加与删除

let vm = new Vue({
    data() { 
      return {
        a
    }
  }
})
vm.b = "xxxx" //非响应
vm.a = "xxx" //响应
vm.$set('b',"xxxx")//响应

Vue 不能检测以上属性添加或删除的变化，必须使用 Vue.set 或者 vm.$set 设置属性

数组更新检测

Vue 无法检测到以下更新：

• 单独设置数据中某一项元素
• 变更数据长度

替代的解决方案是使用 vm.$set 方法,删除数据某一项使用 splice 方法

let vm = new Vue({
    data() {
      return {
        items:[]
    }
  }
})
vm.$set(vm.items,index,item)
vm.items.splice(newLength)
vm.items.splice(itemIndex,1)
vm.items.push(item)
...

单文件组件命名

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。并且组件命名应该使用多个单词连接。
例如
App.vue 或者 hello-world.vue

Props命名

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。

变量命名

变量和方法建议用小写驼峰命名法(camelCase)。
以”_”,”$”为开头命名的变量不会被 Vue 代理

let vm = new Vue({
  template:`
        <div>
        <span>{{_a}}</span>
    <span>{{$b}}</span>
</div>
`,
    data() {
      _a:1,
     $b:2
  }
})
vm._a = 3 //不会响应
vm.$b = 4 //不会响应

私有属性

Vue 使用 _ 前缀来定义其自身的私有属性，所以使用相同的前缀 (比如 _update) 有覆写实例属性的风险。即便你检查确认 Vue 当前版本没有用到这个属性名，也不能保证和将来的版本没有冲突。
对于 $ 前缀来说，其在 Vue 生态系统中的目的是暴露给用户的一个特殊的实例属性，所以把它用于私有属性并不合适。
不过，我们推荐把这两个前缀结合为 $_，作为一个用户定义的私有属性的约定，以确保不会和 Vue 自身相冲突。

事件绑定

在自定义 Vue 组件上绑定原生事件需要加 .native 修饰符

<my-component @click.native="handleClick"></my-component>

定时器

组件内部创建的定时器要及时销毁，防止内存溢出

let vm = new Vue({
    mounted() {
      this.timer = setInterval(()=>{},10000)    
  },
  beforeDestory() {
      clearInterval(this.timer)
  }
})

dom操作

需要在dom操作之后执行的操作要放到$nexTick中执行

let vm = new Vue({
    mounted() {
      this.$nextTick(()=>{
        ///.......
    })
  }
})