onUpdated 在响应式数据引发 DOM 更新完成后触发，需在 中导入使用；它不响应未渲染的数据变更，且不可在 SSR 中使用，常配合模板 ref 安全操作更新后的 DOM。
在 Vue 单文件组件（SFC）中使用 onUpdated，核心是：它只在响应式数据变化导致 DOM 实际更新完成后触发，且必须在 <script setup></script> 中通过导入并注册回调函数来使用。
onUpdated 的触发前提
它不是每次数据赋值都执行，而是满足两个条件才会调用：
- 响应式状态（如
ref或reactive）发生了变更； - 该变更引发了组件的重新渲染，并且新的 DOM 已完成挂载和替换。
例如点击按钮修改 count.value 后，DOM 中的文本刷新完毕，onUpdated 才会执行。单纯改变一个未被模板使用的变量，不会触发它。
基础写法（<script setup>）</script>
直接导入并传入回调函数即可：
立即学习“前端免费学习笔记（深入）”；
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
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++），否则可能引发无限更新循环。
配合 ref 获取更新后的真实 DOM
如果需要操作更新后的节点，推荐结合模板 ref 使用：
<template>
<div id="counter" ref="counterRef">{{ count }}</div>
<button @click="increment">+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 节点。
常见误区提醒
-
不能在服务端渲染（SSR）中使用：
onUpdated仅在客户端执行，服务端不触发； -
不等于“数据变化后立刻执行”：它是异步批量更新后的钩子，若需精确控制时机，可搭配
nextTick()； -
父子组件顺序要注意：父组件的
onUpdated总是在所有子组件更新完毕后才调用。
只要数据驱动了模板重绘，且你关注的是“画完之后”的状态，onUpdated 就是最直接的选择。
