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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。