获取Vue3设置脚本中的下一个勾号

Question

如何在vue3中的设置脚本中使用下一个tick？

<script setup>

const msg = 'Hello!'
this.$nextTick(() => {
console.log("next tick ... do something")
});
</script>
<template>
<p>{{ msg }}</p>
</template>

我使用了多种不同的方法，但找不到一种能在正常脚本标记之外工作的方法。

我尝试的另一种方法是。

import Vue from "vue";
Vue.nextTick(() => {});

Answer 1

这就是在Vue 3中使用nextTick()的方法。

<script setup>
import { ref, nextTick } from 'vue'
const count = ref(0)
async function increment() {
count.value++
// DOM not yet updated
console.log(document.getElementById('counter').textContent) // 0
await nextTick()
// DOM is now updated
console.log(document.getElementById('counter').textContent) // 1
}
</script>
<template>
<button id="counter" @click="increment">{{ count }}</button>
</template>

在这里你可以找到更多信息：https://vuejs.org/api/general.html#nexttick

Answer 2

虽然Mises的答案是正确的，但nextTick((也可以在没有async/await的情况下使用，如下所示：

nextTick().then(() => {
// DOM is now updated
console.log("Continue here")
}

我认为这是一种稍微更好的做法，因为它允许您使用Promises。