$nextTick 的原理是利用 Vue 在下次 DOM 更新循环结束之后执行延迟回调。它的用途有:
- 在组件更新后获取DOM信息
由于Vue是异步执行DOM更新的,如果需要立即获取更新后的DOM信息,需要在$nextTick后执行:
js
this.$nextTick(() => {
// 访问更新后的 DOM
})
- 在状态改变之后等待DOM更新
当某些操作需要在DOM更新完成后再进行,要使用$nextTick:
js
this.message = 'changed'
this.$nextTick(() => {
// DOM 已更新
})
- 批量更改数据后等待DOM更新
如果对数据的多次更改会引起多次的重渲染,可以在改完数据后使用$nextTick批量渲染:
js
dataChanged() {
this.message = 'changed'
this.count++
this.$nextTick(() => {
// DOM updated
})
}
所以简单来说,$nextTick 会在 DOM 更新后触发回调,以等待 DOM 更新完成。它很有用适合在需要操作更新后的DOM时使用。
