onBeforeUpdate 在更新前触发，DOM 未重绘，适合保存状态、清理操作；onUpdated 在更新后触发，DOM 已同步，适合 DOM 操作与第三方库初始化，二者均不适用于 SSR 且需防循环更新。
onBeforeUpdate 和 onUpdated 是 Vue 3 组合式 API 中的两个生命周期钩子，专门用于监听组件因响应式数据变化而触发的重新渲染过程。它们成对出现，一个在更新前执行，一个在更新后执行，适合处理 DOM 同步、动画控制、性能调试等场景。
onBeforeUpdate：更新开始前，DOM 还未重绘
这个钩子在组件即将重新渲染（即虚拟 DOM 已重新生成，但尚未应用到真实 DOM）时触发。此时你可以读取更新前的 DOM 状态，或执行一些“清理”操作（比如暂停动画、取消 pending 请求），避免与即将发生的 DOM 变更冲突。
- 不能直接操作或依赖更新后的 DOM，因为真实 DOM 还没变
- 适合保存当前滚动位置、暂存 input 光标、中断正在进行的过渡效果
- 如果在其中修改响应式数据，会触发新一轮更新（慎用，易导致循环）
onUpdated：更新完成，DOM 已同步到位
这个钩子在组件完成一次完整的重新渲染（虚拟 DOM diff 完成 + 真实 DOM 更新完毕）后执行。此时获取的 DOM 节点反映的是最新状态，适合做 DOM 相关的后续操作。
- 可以安全调用
ref.value.focus()、getBoundingClientRect()、第三方库初始化（如 Chart.js） - 注意：它不保证子组件也已完成更新（如子组件用了
v-if或异步组件，可能滞后） - 频繁触发时建议加防抖，避免性能问题（例如列表滚动中大量 item 更新）
典型使用示例：保持输入框光标位置
当输入内容被响应式更新（比如通过搜索过滤实时刷新列表）时，页面重排可能导致 input 失焦或光标跳到开头。可用这两个钩子配合保存/恢复光标：
- 在
onBeforeUpdate中读取并缓存当前input的selectionStart和selectionEnd - 在
onUpdated中找到原 input 元素，用setSelectionRange恢复光标 - 需用
ref显式绑定 input 元素，并确保缓存逻辑只针对目标元素
注意事项和常见误区
这两个钩子只对有模板更新的组件有效——纯函数式组件、没有 template 的 setup 组件或仅靠 watch 手动操作 DOM 的场景不会触发它们。
- 不要在
onUpdated中直接修改响应式数据（除非明确需要下一轮更新），否则可能引发无限循环 - 服务端渲染（SSR）中这两个钩子不会执行，因为没有 DOM 更新过程
- 与
mounted不同，它们每次响应式变更都可能多次触发，需关注执行频率
