Vue之不常注意的点

一. vue更新数据是异步的

this.$nextTick()  && Vue.nextTick()的作用

在某个动作有可能改变DOM元素结构的时候，对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。使用时机：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数，此时页面并未全部渲染。

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

 二. 对于移动端的触摸事件

对于原生的js,要禁止浏览器的默认行为，就是e.preventDefault();

对于vue，有@touchstart.prevent;不过对于类似移动端的字母筛选，还是会触发到背景下的滚动，于是可以采用css属性--touch-action:none;完全禁止掉浏览器的默认行为就可以了

三. 对于锚点的使用

对于懒加载，使用锚点是没有任何作用的，所以对于需要使用锚点的组件，不能用webpack的懒加载

四. 对于watch属性

直接对于修改数组或者对象的某个属性，并不会触发watch，要使用vue的this.$set（obj, key, newValue）来触发watch时间