onUpdated 是 Vue 3 中在响应式数据变更引发 DOM 重渲染完成后触发的生命周期钩子，需从 'vue' 显式导入并在 顶层调用，不适用于首次挂载，常用于 DOM 测量、聚焦或第三方库初始化，但需避免修改响应式数据以防无限循环。
在 Vue 3 单文件组件（SFC）中使用 onUpdated，核心是：它只在响应式数据变更引发 DOM 重渲染完成后触发，且必须在 <script setup></script> 中显式导入并调用。
onUpdated 的基本用法
它不是自动运行的魔法函数，而是需要你主动注册一个回调。每次组件因响应式状态变化完成 DOM 更新后，该回调就会执行一次。
- 必须从
'vue'显式导入：import { onUpdated } from 'vue' - 必须在
<script setup></script>的顶层同步调用（不能包裹在函数或条件语句里） - 它不适用于首次挂载（mounted 阶段），只响应后续更新
- 服务端渲染（SSR）期间不会执行
监听 DOM 变化时的典型操作
因为此时真实 DOM 已与最新数据完全一致，你可以安全读取、测量或初始化依赖 DOM 的逻辑：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 获取更新后元素的内容：
document.getElementById('count').textContent - 读取尺寸或位置：
el.getBoundingClientRect()、el.scrollHeight - 聚焦输入框：
inputRef.value?.focus() - 初始化第三方库（如 Swiper、Chart.js）——但注意：应配合防抖或条件判断，避免重复初始化
常见陷阱与规避方式
onUpdated 会频繁触发（比如 class 切换、样式更新等微小变更也会触发），直接放重逻辑容易拖慢性能或引发错误：
立即学习“前端免费学习笔记（深入）”；
- ❌ 不要在回调中修改响应式数据（如
count.value++），否则会再次触发更新，造成无限循环 - ❌ 避免无条件执行高开销操作（如反复创建 canvas、重绘图表）
- ✅ 若只关心某个特定字段变化，优先用
watch替代全量监听 - ✅ 如需精确控制时机（例如确保某次更新后才执行），可搭配
nextTick做微调，但通常不需要 ——onUpdated本身已保证 DOM 就绪
一个完整示例
点击按钮更新计数，并在 DOM 更新后打印当前显示值：
<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
const handleClick = () => {
count.value++
}
onUpdated(() => {
const el = document.getElementById('counter')
if (el) {
console.log('DOM 已更新为：', el.textContent.trim())
}
})
</script>
<template>
<button id="counter" @click="handleClick">{{ count }}</button>
</template> 
