Vue Composition API如何使用 onUpdated 编写组件更新后的逻辑

onUpdated 在组件更新并重新渲染 DOM 后执行，适用于焦点管理、滚动同步、第三方库重绘等场景；需避免修改响应式数据以防死循环，配合 onBeforeUpdate 可实现状态保存与恢复。

onUpdated 用于在组件完成更新并重新渲染 DOM 后执行逻辑，适合处理依赖最新 DOM 状态的操作，比如焦点管理、滚动同步、第三方库重绘等。

onUpdated 的触发时机和限制

它在响应式数据变化 → 虚拟 DOM 重新渲染 → 真实 DOM 更新完成后触发。注意：

1. 不适用于初始化阶段（此时还没首次渲染，onMounted 更合适）
2. 不能在回调里直接修改响应式数据，否则可能引发无限更新循环
3. 同一组件中可多次调用 onUpdated，所有回调都会执行
4. 子组件更新也会触发父组件的 onUpdated（如果父组件模板依赖了该子组件的输出）

常见使用场景与写法

典型需求是“DOM 更新后做点事”，例如：

1. 让某个输入框自动获得焦点（当它因 v-if/v-show 显示出来时）
2. 滚动容器到新添加的内容底部（如聊天消息列表）
3. 通知图表库重绘（如 ECharts 或 Chart.js）
4. 校验表单字段并高亮错误区域（需确保元素已渲染）

写法示例（<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()}})

避免踩坑的关键细节

实际开发中容易出错的地方：

1. 不要在 onUpdated 里调用 state.value++ 这类赋值——会再次触发更新，导致死循环
2. 操作 DOM 前先判空：if (el?.offsetHeight)，防止 SSR 渲染或条件渲染未就绪
3. 若逻辑只应在特定数据变更后运行，建议搭配 watch 或计算属性提前过滤，而不是靠 onUpdated 盲等
4. 高频更新（如 typing 输入）下，onUpdated 可能频繁触发，必要时用防抖（useDebounce）包裹逻辑

和 onBeforeUpdate 的配合用法

两者常成对出现，形成“更新前记录状态 → 更新后恢复/应用”模式：

1. onBeforeUpdate：保存滚动位置、选中范围、光标偏移量
2. onUpdated：恢复滚动、重置光标、重新聚焦

例如表格编辑时保持行内输入框焦点：

let lastFocusedInput = nullonBeforeUpdate(() => {lastFocusedInput = document.activeElement})onUpdated(() => {if (lastFocusedInput?.matches('.editable-input')) {lastFocusedInput.focus()}})