vue中响应式数据变更后，watch/watcheffect在dom更新前的微任务中执行，onupdated在dom更新完成后触发；vue 2中watch异步执行、updated在dom patch后调用。
Vue 中响应式数据变更后，相关 Hook 的触发时机取决于你使用的 Vue 版本（2.x 还是 3.x）以及具体使用的 API（watch、watchEffect、updated、onUpdated 等）。核心原则是：**数据变更触发依赖更新，但 DOM 更新和 Hook 执行有明确的异步时序**。
Vue 3 中 watch / watchEffect 的触发时机
watch 和 watchEffect 默认在响应式依赖变化后的下一个微任务（microtask）中执行，即在 DOM 更新前、同步更新队列之后。它们不等待组件重渲染完成，而是响应“响应式状态变更”本身。
-
watch(source, callback)：当source（ref、reactive、getter 或数组）的值被修改且触发依赖收集后，callback 在当前 tick 的末尾（nextTick 前）执行 -
watchEffect(callback)：自动追踪内部响应式依赖，首次执行后，只要依赖变更，callback 就在下一次 microtask 中重新运行 - 若需在 DOM 更新后执行，应显式搭配
await nextTick()
Vue 3 中 onUpdated 的触发时机
onUpdated 是组件级生命周期钩子，在组件的虚拟 DOM 重新渲染完成、真实 DOM 已同步更新后触发。它只在组件自身响应式状态变更引起重渲染时调用，且保证 DOM 已就绪。
- 适用于需要操作更新后 DOM 的场景（如聚焦 input、调整 canvas 尺寸）
- 注意：它不响应子组件内部状态变更（除非该变更导致当前组件重渲染）
- 每次重渲染（包括因父组件传入 prop 变更引起的）都会触发，非仅限于本地 data/ref 修改
Vue 2 中 watch 与 updated 的行为差异
Vue 2 的 watch 默认是异步的（使用 queueWatcher），回调在下次 DOM 更新周期前执行；而 updated 钩子则严格在 DOM patch 完成后调用。
- 设置
immediate: true可让 watch 立即执行一次（初始化时） - 设置
sync: true可强制 watch 同步执行（不推荐，易引发栈溢出或响应不一致） -
updated不保证子组件也已完成更新，如需等待全部 DOM 就绪，需配合this.$nextTick()（但它本身已处于 nextTick 回调中）
关键时序总结（以 Vue 3 为例）
一次响应式赋值（如 count.value++）后，事件流大致如下：
- 触发依赖通知（trigger）→ 收集到的 effect 被推入 microtask 队列
- microtask 执行：
watchEffect或watch回调运行 - 接着执行组件更新：render → diff → patch DOM
- DOM 更新完毕 → 触发
onUpdated - 若在 watch 回调中调用
await nextTick()，则会等到onUpdated之后再继续执行后续逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
