首先说一说什么是nextTick。
根据官网的解释,nextTick就是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
换句话说,Vue在更新DOM时是异步执行的,即当数据发生变化时,Vue将会开启一个异步更新的队列。当视图的数据变化完事后,再统一进行更新。
也就是说,在DOM更新的时候,后面将获取不到更新后的最新的变量,如下例:
<template>
<div class="home">
<div ref="btn">{
{ message }}</div>
<button @click="change()">点我修改</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "旧变量",
}
},
methods: {
change() {
this.message = "新变量"
console.log(this.$refs.btn.innerText)
}
}
}
</script>
此时点击按钮触发方法,虽然你改变了div上的message值,但是由于异步的缘故,此时通过ref无法获取div上的值,因为这个时候DOM并未更新。因此输出的是“旧变量”。
因此对change()方法进行修改,使用$nextTick,获取更新后的DOM值:
change() {
this.message = "新变量"
this.$nextTick(()=>{
console.log(this.$refs.btn.innerText)
})
}
结果就能获取到最新的值了。
若没有nextTick,每次改变数据都会触发视图更新,及其浪费资源。因此,有了该机制,只需统一更新一次就可以了。
希望本文会对你有所帮助。