onBeforeUpdate在DOM更新前执行，数据已更新但视图未变；onUpdated在DOM更新后执行，视图与数据同步。二者均不触发于首次挂载和SSR，组合式API需显式引入并调用。
onBeforeUpdate 和 onUpdated 是 Vue 组件在数据变化引发视图更新时触发的两个关键钩子，它们成对出现、时机明确、职责分明——一个在 DOM 重绘前，一个在 DOM 重绘后。
onBeforeUpdate：数据已变，DOM 尚未更新
这个钩子在响应式数据发生变化、虚拟 DOM 已重新渲染但尚未应用到真实 DOM时执行。此时 this.message、this.count 等值已是新值，但页面上看到的仍是旧内容。
- 适合做“更新前快照”，比如记录旧 DOM 状态（
el.innerHTML）、比对前后差异、或触发轻量级预处理逻辑 -
严禁在此修改响应式数据（如
this.count++），否则会再次触发更新，造成无限循环 - 无法安全操作真实 DOM（例如
document.getElementById获取的元素可能还未反映最新结构）
onUpdated：DOM 已同步，可放心操作
该钩子在虚拟 DOM 完成补丁（patch）并真实 DOM 更新完毕后立即执行。此时页面显示与数据完全一致，所有元素都已就位。
- 是执行依赖 DOM 的操作的安全时机，比如初始化第三方库（Chart.js、Swiper）、聚焦输入框、读取元素尺寸（
el.getBoundingClientRect()） - 注意：它会在每次更新后都触发，包括非关键更新（如 class 切换），应避免放开销大的逻辑
- 若需确保只在特定字段变更时响应，建议配合
watch使用，而非全量监听 onUpdated
典型执行顺序（一次数据变更）
假设点击按钮触发 count++：
立即学习“前端免费学习笔记（深入）”；
- 数据响应式更新 → 触发 onBeforeUpdate（可读新值，DOM 还是旧的）
- Vue 生成新虚拟 DOM 并比对差异 → 执行 DOM patch
- 真实 DOM 更新完成 → 触发 onUpdated（此时
document.querySelector('.num').textContent已是新值）
组合式 API 中的写法要点
在 <script setup> 中需显式引入：
import { onBeforeUpdate, onUpdated } from 'vue'- 在 setup 内调用，传入回调函数：
onBeforeUpdate(() => { /* ... */ }) - 它们不会在首次挂载时触发（只响应后续更新），也不在服务端渲染（SSR）中执行
