Vue nextTick

在 Vue 中，Dom 更新是异步的，当数据发生变化后，Vue 会把更新放到队列中，等待数据更新完毕后，再执行 DOM 更新。所以当数据发生变化后不能马上获取到最新的 Dom，这时需要使用 nextTick。

用法 1

因为 nextTick() 返回的是一个 Promise,所以可以使用 await 来等待它完成

<script setup>
  import { ref, nextTick } from "vue";
  const count = ref(0);
  async function increment() {
    count.value++;
    // DOM 还未更新
    console.log(document.getElementById("counter").textContent); // 0
    await nextTick();
    // DOM 此时已经更新
    console.log(document.getElementById("counter").textContent); // 1
    {
      /* 或者 */
    }
    nextTick().then(() => {
      // DOM 此时已经更新
      console.log(document.getElementById("counter").textContent); // 1
    });
  }
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

用法 2

<script setup>
  import { ref, nextTick } from "vue";
  const count = ref(0);
  async function increment() {
    count.value++;
    // DOM 还未更新
    console.log(document.getElementById("counter").textContent); // 0
    nextTick(() => {
      // DOM 此时已经更新
      console.log(document.getElementById("counter").textContent); // 1
    });
  }
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>