onUpdated 会在组件完成更新、DOM 重新渲染结束后触发，常见应用场景包括焦点管理、滚动位置同步，以及第三方库的重新渲染或重绘；不过有一个非常重要的注意点：尽量不要在这个阶段再次修改响应式数据，否则很容易让组件陷入死循环。如果与 onBeforeUpdate 配合使用，通常还能更稳定地完成状态保存与恢复这类更新前后的逻辑处理。

onUpdated 的主要作用，是在 Vue 组件更新完成、DOM 重新渲染之后执行对应逻辑。凡是依赖最新 DOM 状态的操作，通常都适合放在这个生命周期钩子中处理，比如输入框焦点控制、页面滚动同步，或者通知第三方库重新绘制界面。

onUpdated 的触发时机和限制

它会在响应式数据发生变化 → 虚拟 DOM 重新计算与渲染 → 真实 DOM 完成更新之后触发。需要特别注意：

• 不适用于初始化阶段（因为此时还没有完成首次渲染，onMounted 更适合）
• 不要在回调中直接修改响应式数据，否则可能触发无限更新循环
• 同一个组件里可以多次调用 onUpdated，注册的回调都会依次执行
• 当父组件模板依赖子组件输出时，子组件更新也可能触发父组件的 onUpdated

常见使用场景与写法

它最典型的使用需求就是“DOM 更新完成后执行某些操作”，例如：

• 让某个输入框在通过 v-if 或 v-show 显示后自动获取焦点
• 将滚动容器移动到新追加内容的底部（例如聊天消息列表）
• 通知图表库重新渲染或重绘（如 ECharts、Chart.js）
• 校验表单字段并高亮错误区域（前提是对应元素已经渲染完成）

写法示例（