Vue异步更新机制nextTick

Vue是异步渲染，data改变之后，Dom不会立刻渲染，而且页面渲染是会将data的修改做整合，多次data修改只会渲染一次，$nextTick会在Dom渲染后被触发，以获取最新的Dom节点

for(let i=0;i<100,i++){
	this.message =i
}
this.$nextTick(()=>{
	xxx
})

页面只会渲染一次，等待同步代码执行完，添加到任务队列中处理，提高性能，而nextTick是在微任务最后添加了一条，故而能感知到之前的所有变化，如果不适用nextTick，那么同步执行完xxx，而组件还没更新，故而得出的dom需求是不符合预期的。

Vue.nextTick( [callback, context] ) 与异步渲染

用法：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

原理：Promise/MutationObserver/setImmediate/setTimeout

 // 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })
 ......
   this.$nextTick(function () {
       this.changeadd++;
  })

异步渲染：减少dom操作次数，提高性能

参考 (opens new window)