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()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。