onUpdated 在组件更新并重新渲染 DOM 后执行，适用于焦点管理、滚动同步、第三方库重绘等场景；需避免修改响应式数据以防死循环，配合 onBeforeUpdate 可实现状态保存与恢复。
onUpdated 用于在组件完成更新并重新渲染 DOM 后执行逻辑，适合处理依赖最新 DOM 状态的操作，比如焦点管理、滚动同步、第三方库重绘等。
onUpdated 的触发时机和限制
它在响应式数据变化 → 虚拟 DOM 重新渲染 → 真实 DOM 更新完成后触发。注意：
- 不适用于初始化阶段（此时还没首次渲染，onMounted 更合适）
- 不能在回调里直接修改响应式数据，否则可能引发无限更新循环
- 同一组件中可多次调用 onUpdated，所有回调都会执行
- 子组件更新也会触发父组件的 onUpdated（如果父组件模板依赖了该子组件的输出）
常见使用场景与写法
典型需求是“DOM 更新后做点事”，例如：
- 让某个输入框自动获得焦点（当它因 v-if/v-show 显示出来时）
- 滚动容器到新添加的内容底部（如聊天消息列表）
- 通知图表库重绘（如 ECharts 或 Chart.js）
- 校验表单字段并高亮错误区域（需确保元素已渲染）
写法示例（<script setup>）：
立即学习“前端免费学习笔记（深入）”；
import { ref, onUpdated } from 'vue'
const messages = ref([])
const inputRef = ref(null)
onUpdated(() => {
// 消息列表更新后，滚动到底部
const container = document.querySelector('.message-list')
if (container) {
container.scrollTop = container.scrollHeight
}
// 输入框显示后自动聚焦（配合 v-if）
if (inputRef.value && messages.value.length > 0) {
inputRef.value.focus()
}
})
避免踩坑的关键细节
实际开发中容易出错的地方：
- 不要在 onUpdated 里调用 state.value++ 这类赋值——会再次触发更新，导致死循环
- 操作 DOM 前先判空：
if (el?.offsetHeight)，防止 SSR 渲染或条件渲染未就绪 - 若逻辑只应在特定数据变更后运行，建议搭配 watch 或计算属性提前过滤，而不是靠 onUpdated 盲等
- 高频更新（如 typing 输入）下，onUpdated 可能频繁触发，必要时用防抖（
useDebounce）包裹逻辑
和 onBeforeUpdate 的配合用法
两者常成对出现，形成“更新前记录状态 → 更新后恢复/应用”模式：
-
onBeforeUpdate：保存滚动位置、选中范围、光标偏移量 -
onUpdated：恢复滚动、重置光标、重新聚焦
例如表格编辑时保持行内输入框焦点：
let lastFocusedInput = null
onBeforeUpdate(() => {
lastFocusedInput = document.activeElement
})
onUpdated(() => {
if (lastFocusedInput?.matches('.editable-input')) {
lastFocusedInput.focus()
}
})
