Vue中的nextTick
涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下。其中关于nextTick
的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick
。
一、示例
先来一个示例了解下关于Vue中的DOM更新以及nextTick
的作用。
模板
<div class="app">
<div ref="msgDiv">{
{msg}}</div>
<div v-if="msg1">Message got outside $nextTick: {
{msg1}}</div>
<div v-if="msg2">Message got inside $nextTick: {
{msg2}}</div>
<div v-if="msg3">Message got outside $nextTick: {
{msg3}}</div>
<button @click="changeMsg">
Change the Message
</button>
</div>
Vue实例
new Vue({
el: '.app',
data: {
msg: 'Hello Vue.',
msg1: '',
msg2: '',
msg3: ''
},
methods: {
changeMsg() {
this.msg = "Hello world."
this.msg1 = this.$refs.msgDiv.innerHTML
this.$nextTick(() => {
this.msg2 = this.$refs.msgDiv.innerHTML
})
this.msg3 = this.$refs.msgDiv.innerHTML
}
}
})
点击前
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vWUgDl9c-1624353214293)(//upload-images.jianshu.io/upload_images/3985563-b6bb266285e8d232.png?imageMogr2/auto-orient/strip|imageView2/2/w/152/format/webp)]
点击后
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pngvdHmb-1624353214295)(//upload-images.jianshu.io/upload_images/3985563-f49bff3190724514.png?imageMogr2/auto-orient/strip|imageView2/2/w/341/format/webp)]
从图中可以得知:msg1和msg3显示的内容还是变换之前的,而msg2显示的内容是变换之后的。其根本原因是因为Vue中DOM更新是异步的(详细解释在后面)。
二、应用场景
下面了解下nextTick
的主要应用的场景及原因。
- 在Vue生命周期的
created()
钩子函数进行的DOM操作一定要放在Vue.nextTick()
的回调函数中
在created()
钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()
的回调函数中。与之对应的就是mounted()
钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。
- 在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进
Vue.nextTick()
的回调函数中。
具体原因在Vue的官方文档中详细解释:
Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并