Vue.js nextTick()用法及代码示例

等待下一次 DOM 更新刷新的实用程序。

类型

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

细节

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

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

示例

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

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

相关用法

注：本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 nextTick()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。