Vue $nextTick() 方法
示例
使用 $nextTick() 方法等待 DOM 更新后，再获取 <p> 标签内的消息。
methods: {
updateMsg() {
this.message = '"Hello! This is a new message."';
this.results.push(this.$refs.pEl.textContent);
this.$nextTick(() => {
this.results.push(this.$refs.pEl.textContent + ' (using $nextTick())');
});
}
}
更多示例请参见下方。
定义和用法
$nextTick() 方法会等待 DOM 更新后再执行。
我们使用 this.$nextTick() 来等待当前 Vue 组件的 DOM 更新周期完成。
| 参数 | 描述 |
|---|---|
| 回调函数 | 可选。提供的回调函数将在 DOM 更新后运行（见上面的示例）。$nextTick() 方法也可以不带参数使用（见下面的示例）。 |
除了 this.$nextTick() 之外，还有一个全局的 nextTick() 方法，可以用于等待 DOM 更新，即使在特定组件的作用域之外也可以使用。
注意：在 Vue 中，当响应式变量改变时，DOM 不会立即更新。Vue 会缓存这些更改，并在“下一个 tick”发生时应用它们。这是为了提高性能并确保 Vue 实例和 DOM 之间的一致性。
更多示例
示例
通过在异步方法中使用 await 前缀调用 $nextTick() 方法，可以实现与第一个示例相同的结果。这将使接下来的代码行暂停，直到“下一个 tick”发生。
<template>
<h2>Example $nextTick() Method</h2>
<p>Using "await $nextTick()", the next lines of code will also wait until the 'next tick' happens.
</p>
<div>
<p ref="messageEl">{{ message }}</p>
<button v-on:click.once="updateMsg">Update Message</button>
<ol>
<li v-for="x in results">{{ x }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
message: "Initial Message",
results: []
};
},
methods: {
async updateMsg() {
this.message = "Hello! This message is now updated.";
this.results.push(this.$refs.messageEl.textContent);
await this.$nextTick();
this.results.push(this.$refs.messageEl.textContent + ' (after await $nextTick())');
}
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
</style>
相关页面
JavaScript 教程：JavaScript Async
Vue 教程： Vue 方法
Vue 教程：Vue Template Refs
Vue 教程：Vue v-on
Vue 教程：Vue 事件修饰符
Vue 参考：Vue 'ref' 属性
Vue 参考：Vue $refs 对象
