浣熊学习Vue之$nextTick

一、Vue对其官方定义（$nextTick）

   在下次DOM更新循环结束之后执行延迟回调。
   在修改数据之后立即使用这个方法，可以获取更新后的DOM
   什么意思呢？
   我们可以理解成，Vue在更新DOM时是异步执行的，当数据发生变化时，
   Vue会开启一个异步更新的队列，视图需要等这个异步队列中所有的数据
   变化完成之后，再统一进行更新。

举个粟子:

html结构

<div id="app">{{mag}}</div> 

构建一个Vue实例

const vm = new Vue({
    el:'#app',
    data:{
        msg:'hello'
    }       
})

修改msg

this.msg = "hello1";
this.msg = "hello2";
this.msg = "hello3";

这时获取页面最新的DOM节点，却发现获取到的是旧值

console.log(vm.$el.textContent)  // msg

这是因为msg数据在变化的时候，Vue不会立刻去更新DOM，而是将修改数据的操作放在了一个异步操作队列中，如果我们一直修改相同的数据，异步操作还会进行去重，等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行DOM的更新。

在举个粟子

  for(let i=0; i<1000000000; i++){
      num = i
  }
  可以看到，如果没有nextTick的更新机制，，那么每次更新值都会触发
  视图的更新，上面的代码就会有1000000000次更新，而有nextTick,
  只要更新一次。

二、使用场景

在vue的created钩子函数中修改数据时就可以用到$nextTick,这时this实例已经创建，但dom节点还未挂载，但是用nextTick可以得到更新后的DOM结构。