nextTick的使用

一 为什么用nextTick

vue中的Dom更新是异步的，是异步的意味着当被处理数据是动态变化时，此时对应的Dom未能及时更新（同步更新）就会导致数据已经更新（model层已经更新）而视力层未更新（Dom未更新）此时就需要使用nextTick了。
当你想要拿到更新后的Dom，一定要在nextTic的回调函数中去获取更新后的Dom的值。
如`this.$nextTick(()=>{})
结构：

this.$nextTick(()=>{
 在这里获取dom更新后的值
})

注意：在下次Dom更新循环之后去执行回调函数，修改model层数据之后，立即在这个回调中获取更新后的dom。
回调的调用时机：需要在视图更新之后，基于新的视图上进行操作。
例：

data(){
msg:"aaa"
}
<div ref="ipt" @click="btn">{{msg}}</div>
btn(){
 this.msg = "bbb";
 console.log("获取dom",this.$refs.ipt.innerHTML)
 console.log("获取数据",this.msg);
 this.$nextTick(()=>{
  console.log("nextTick回调中",this.$refs.ipt.innerHTML);
 })
}

经上可知，修改数据后Model层会立即同步更新了，而Dom并没有及时更新，而在回调函数中的Dom的值是更新后的，那么回调函数到底做了什么 呢，在数据变化之后立即使用this.$nextTick(callback),callback又称延迟回调，而此回调在dom更新完成后就会自动调用（它会等待Dom更新完成）。

二 使用场景

1、在created生命同期里，想操作（渲染后的视图）—不存在。
因在created执行时，Dom并未进行任何渲染，因此拿不到。
如非要等，可以在nextTick的回调函数中去操作。
2、在mounted生命同期表示所有的dom都 已挂载并渲染完成，在此钩子函数操作dom几乎没有问题，但mounted可并没有承诺所有的子组件都一起被挂载，如果等所有整个视图全部渲染完毕也可以考虑使用nextTick代替mounted比较保险。
例：

mounted(){
 this.$nextTick(()=>{
  在此操作子组件更新后的dom
 })
}

3、在使用第三方插件时，希望在vue生成 的某些dom动态变化时去重新调用该插件也可以使用。
例：

mounted(){
 this.$nextTick(()=>{
  this.Toast("xxx")c
 })
}

如想了解nextTick的原理，可以去官方文档看源码。及异步更新Dom的原理==>异步更新队列等。