其实就是在DOM内容完全更新了之后再执行callback中的操作,避免拿到脏DOM
常用于需要操作更新后 DOM 的场景,比如获取元素尺寸、聚焦输入框、初始化第三方库等。
export default {
data() {
return {
message: 'Hello'
}
},
methods: {
updateMessage() {
this.message = 'Updated!'; // 修改数据
// ❌ 此时 DOM 还未更新
console.log(this.$el.textContent); // 可能还是 'Hello'
// ✅ 等 DOM 更新后再执行
this.$nextTick(() => {
console.log(this.$el.textContent); // 现在是 'Updated!'
});
}
}
}