Vue Composition API如何使用 onBeforeUpdate 编写更新开始前的逻辑

onBeforeUpdate 在组件响应式数据变更导致重新渲染前触发，此时响应式数据已更新但 DOM 尚未更新。它不用于首次渲染或子组件更新，适用于保存旧 DOM 状态等场景。

onBeforeUpdate 是 Vue Composition API 中的一个生命周期钩子，用于在组件更新（即响应式数据变化触发 DOM 重新渲染）之前执行逻辑。它只在组件已挂载、且存在响应式状态变更时被调用，不适用于首次渲染（首次渲染前用 onBeforeMount）。

什么时候会触发 onBeforeUpdate？

当组件内使用的响应式数据（如 ref、reactive）发生改变，并且这些变化会导致当前组件的模板需要重新渲染时，Vue 会在虚拟 DOM 打补丁（patch）前调用 onBeforeUpdate。注意：它不会因为子组件更新而触发，只属于当前组件自身的更新周期。

1. 父组件传入的 prop 改变 → 当前组件重新渲染 → 触发
2. 组件内部 ref.value = ... 或 state.xxx = ... → 模板依赖该值 → 触发
3. 仅读取响应式数据（无赋值）或未影响模板 → 不触发
4. 使用 v-if 切换显示/隐藏 → 组件卸载/挂载 → 不走 update 阶段，不触发

如何在 setup 中正确使用？

在 setup() 函数或 script setup 语法中，直接导入并调用：

import { onBeforeUpdate, ref } from 'vue'export default {setup() {const count = ref(0)onBeforeUpdate(() => {// 此时 DOM 还没更新，但响应式数据已是新值console.log('更新前：count =', count.value) // 输出更新后的值// 可在此保存旧 DOM 状态、取消动画、清理定时器等})return { count }}}

⚠️ 注意：onBeforeUpdate 回调中访问的响应式变量已经是更新后的新值（因为响应式系统已同步更新了依赖），但真实 DOM 尚未刷新。

典型适用场景与建议

这个钩子适合做DOM 更新前的准备性操作，尤其涉及与 DOM 紧密耦合的逻辑：

1. 记录当前滚动位置，以便更新后恢复（如列表加载更多）
2. 暂停正在运行的 CSS 动画或 requestAnimationFrame
3. 清理上一次更新中启动的异步操作（如未完成的 fetch 请求引用）
4. 对比新旧状态，决定是否跳过某些 DOM 操作（需配合 onUpdated 做闭环）

不推荐在这里修改响应式数据——虽然不会报错，但可能引发额外更新循环，逻辑不易追踪。

常见误区提醒

不要把它当成“数据变化监听器”：它不接收参数，也无法得知具体哪个值变了；若需响应特定数据变化，请优先用 watch 或 watchEffect。

首次渲染不触发：想在初始渲染前做事，用 onBeforeMount；想在首次渲染后操作 DOM，用 onMounted。

不能在条件语句中调用：必须在 setup 的同步顶层执行，否则 Vue 无法正确注册钩子。