我们先来看一下nextTick的官方解释:
nextTick():等待下一次 DOM 更新刷新的工具方法。
- 类型
function nextTick(callback?: () => void): Promise<void>
-
详细信息
当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效的,而是由 Vue 将它们缓存在一个队列中,直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变,都仅执行一次更新。
nextTick() 可以在状态改变后立即使用,以等待 DOM 更新完成。你可以传递一个回调函数作为参数,或者 await 返回的 Promise。
下面我们举个例子理解一下:
添加nextTick之前:
<template>
<div class="next-tick">
<ul ref="ulRef">
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
<button @click="add">添加</button>
</div>
</template>
<script>
export default {
data() {
return {
items: ['项目1', '项目2', '项目3']
}
},
methods: {
add() {
this.items.push(Math.random())
console.log('itemsLength', this.items.length) // 4
const ulElem = this.$refs.ulRef
const length = ulElem.childNodes.length
console.log('domLength', length) // 3
}
}
}
</script>
上边代码点击添加后页面展示如下:
控制台输出:
添加nextTick后:
<template>
<div class="next-tick">
<ul ref="ulRef">
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
<button @click="add">添加</button>
</div>
</template>
<script>
export default {
data() {
return {
items: ['项目1', '项目2', '项目3']
}
},
methods: {
add() {
this.items.push(Math.random())
console.log('itemsLength', this.items.length) // 4
this.$nextTick(() => {
const ulElem = this.$refs.ulRef
const length = ulElem.childNodes.length
console.log('domLength', length) // 4
})
}
}
}
</script>
上边代码点击添加后页面展示如下:
控制台输出: