一 为什么用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的原理==>异步更新队列等。

Logo

前往低代码交流专区

更多推荐