nextTick()

将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。

类型

function nextTick(callback?:()=>void): Promise<void>

细节

当你在 Vue 中改变响应状态时，生成的 DOM 更新不会同步应用。相反，Vue 会缓冲它们直到“下一个更新”，以确保每个组件只更新一次，无论您进行了多少状态更改。

nextTick()可以在状态更改后，立即使用，以等待 DOM 更新完成。您可以将回调作为参数传递，也可以等待返回的Promise。

例子

<script>
import { nextTick } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    async increment() {
      this.count++

      // 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>