Vue.js onUpdated()用法及代碼示例

注冊一個回調，以便在組件由於響應狀態更改而更新其 DOM 樹後調用。

類型

function onUpdated(callback: () => void): void

細節

父組件的更新鉤子在其子組件之後被調用。

在組件的任何 DOM 更新後調用此鉤子，這可能是由不同的狀態更改引起的。如果您需要在特定狀態更改後訪問更新的 DOM，請改用nextTick()。

在服務器端渲染期間不會調用此鉤子。

WARNING

不要在更新的鉤子中改變組件狀態 - 這可能會導致無限更新循環！

示例

訪問更新的 DOM：

<script setup>
import { ref, onUpdated } from 'vue'

const count = ref(0)

onUpdated(() => {
  // text content should be the same as current `count.value`
  console.log(document.getElementById('count').textContent)
})
</script>

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

相關用法

注：本文由純淨天空篩選整理自vuejs.org大神的英文原創作品 onUpdated()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。