nextTick 是 Vue.js 中的一个方法,它允许我们在下次 DOM 更新循环结束之后执行延迟回调。
nextTick 的作用是:
- 等待 DOM 更新完成。
- 然后执行回调函数。
- 避免我们在数据变化之后立即使用 DOM,而 DOM 结构可能还没有更新完成。
使用方法:
js
this.$nextTick(function() {
// DOM 更新了
})
或
js
Vue.nextTick(function() {
// DOM 更新了
})
示例:
html
<div ref="box">{{ message }}</div>
<button @click="message = 'Hello'">Update</button>
js
methods: {
onUpdate() {
this.$nextTick(() => {
this.$refs.box.innerText = this.message
})
}
}
当我们点击按钮更新 message 时,如果直接修改 DOM,那么 DOM 结构可能还未更新,innerText 会获取旧值。
使用 nextTick 可以确保在修改 DOM 之前等待 Vue 完成更新,此时 DOM 结构已更新,innerText 可以获取新值。
所以,nextTick 用于:
- 等待 DOM 更新而不需要定时器。
- 避免操作更新后的 DOM 时,DOM 结构可能还未更新完成。
- 让数据与 DOM 保持同步。