Vue 单文件组件怎么使用 onUpdated 监听视图更新-Vue.js-PHP中文网

onUpdated 在响应式数据引发 DOM 更新完成后触发，需在中导入使用；它不响应未渲染的数据变更，且不可在 SSR 中使用，常配合模板 ref 安全操作更新后的 DOM。

vue 单文件组件怎么使用 onupdated 监听视图更新

在 Vue 单文件组件（SFC）中使用 onUpdated，核心是：它只在响应式数据变化导致 DOM 实际更新完成后触发，且必须在 <script setup></script> 中通过导入并注册回调函数来使用。

onUpdated 的触发前提

它不是每次数据赋值都执行，而是满足两个条件才会调用：

响应式状态（如 ref 或 reactive）发生了变更；
该变更引发了组件的重新渲染，并且新的 DOM 已完成挂载和替换。

例如点击按钮修改 count.value 后，DOM 中的文本刷新完毕，onUpdated 才会执行。单纯改变一个未被模板使用的变量，不会触发它。

基础写法（<script setup>）</script>

直接导入并传入回调函数即可：

import { ref, onUpdated } from 'vue'

const count = ref(0)
const message = ref('hello')

function increment() {
  count.value++
}

// ✅ 正确：监听视图更新完成
onUpdated(() => {
  console.log('DOM 已更新，当前 count:', count.value)
  // 可安全读取更新后的元素内容或尺寸
  const el = document.getElementById('counter')
  if (el) console.log('新文本:', el.textContent)
})

注意：不要在回调里再次修改响应式数据（比如又给 count.value++），否则可能引发无限更新循环。

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

配合 ref 获取更新后的真实 DOM

如果需要操作更新后的节点，推荐结合模板 ref 使用：

<template><div id="counter" ref="counterRef">{{ count }}</div>
  <button>+1</button>
</template><script setup>
import { ref, onUpdated } from 'vue'

const count = ref(0)
const counterRef = ref(null) // 与模板中的 ref="counterRef" 对应

const increment = () => count.value++

onUpdated(() => {
  // ✅ 此时 counterRef.value 已指向更新后的 DOM 元素
  if (counterRef.value) {
    console.log('更新后元素高度:', counterRef.value.offsetHeight)
  }
})
</script>

这是最常见也最可靠的用法——确保你拿到的是最新渲染结果对应的 DOM 节点。