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())');
});
}
}
查看下方更多示例。
定义和用法
The $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 异步
Vue 教程: Vue 方法
Vue 教程: Vue 模板引用
Vue 教程: Vue v-on
Vue 教程: Vue 事件修饰符
Vue 参考: Vue 'ref' 属性
Vue 参考: Vue $refs 对象
