Vue中nextTick()方法的使用介绍

使用场景

实际开发中，如果你想基于新的dom做点什么，那么对新dom的一系列js操作都需要放进Vue.nextTick()的回调函数中。
通俗的理解是：更改数据后，当你想立即使用js操作新的视图时，需要使用它

原理

Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和dom操作。在下一个事件循环时，Vue会清空队列，并进行必要的dom更新。因此可以在数据变化之后立即使用 Vue.nextTick(callback) ，这样回调函数在dom更新完成后就会被立刻自动调用

例子

在Vue生命周期的created()钩子函数中进行的dom操作一定要放在Vue.nextTick()的回调函数中。原因是在created()钩子函数执行的时候dom其实并未进行任何渲染，而此时进行dom操作无异于徒劳。所以此处一定要将dom操作的js代码放进Vue.nextTick()的回调函数中。而mounted()钩子函数执行时所有的dom挂载已完成

created(){
    let _this=this
     //不使用this.$nextTick()方法会报错
    _this.$nextTick(function(){ 
   		 //写入到DOM元素
        _this.$refs.aa.innerHTML="created中更改了按钮内容"
    })
 }