您现在的位置是:首页 >其他 >Vue.nextTick()【问题引入和分析】网站首页其他
Vue.nextTick()【问题引入和分析】
简介Vue.nextTick()【问题引入和分析】
Vue.nextTick()
前言
在此之前,你需要了解:事件循环,重排和重绘,Diff算法,会让你更好的理解本文
内容
先引入一个问题
<template>
<div>
<p>{{ message }}</p>
<button @click="changeMessage">Change Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
changeMessage() {
this.message = 'Updated Message'
console.log(this.$el.textContent) // 输出 "Hello Vue!"
this.$nextTick(function () {
console.log(this.$el.textContent) // 输出 "Updated Message"
})
}
}
}
</script>
在 changeMessage
方法中,更改了组件的 message
数据,并尝试记录 $el.textContent
的值。
但是,由于 Vue
在进行数据更改后不会立即更新DOM(虚拟DOM异步处理)
,所以在记录文本内容时 $el.textContent
仍然是旧值 Hello Vue!
那么为什么进行数据更改后不会立即更新呢?
首先,修改一个就更新一个话,会引起大量的浏览器的重排和重绘
Vue
想到了这一点,它把大量更新操作合并成一个更新队列,在一个事件循环结束之前统一执行
当第一次打印的时候,虽然你改变了DOM
,但是这次事件循环还未结束,还未更新,所以获取的是默认值
当第二次打印的时候,通过Vue.nextTick()
等待事件循环结束,才获取的值,也就是更新后的值
nextTick作用:
将回调函数延迟到下次DOM更新循环之后执行,来观察本次DOM产生的变化
拓展:
-
vue
把大量更新操作合并成了一个更新队列 -
在事件循环中,执行更新任务,就是执行这个更新队列中的任务
-
更新队列中的事件如何去执行的,是通过
nextTick
函数去执行的(执行过程:对更新进行差异比较,返回回调函数,加入渲染队列)
注意:这里的nextTick
和Vue.nextTick()
可不一样哈
结语
感谢读者阅读并关注博客文章,并对文章中提到的观点、建议或批评表示感谢
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。