Vue响应式更新是异步的，数据变更后DOM在下一个微任务中统一刷新；nextTick可确保操作更新后的DOM，beforeUpdate和updated钩子分别在DOM刷新前后执行。
Vue 响应式数据变更后，DOM 不是立刻更新，而是等当前同步代码执行完，在下一个微任务中统一刷新——这个顺序是固定的、可预测的，不是随机或“看运气”的。
数据修改立即生效，但 DOM 暂不响应
你改 count.value = 5，JavaScript 层马上拿到新值；但模板里 {{ count }} 还显示旧值，DOM 节点也没变。这是因为 Vue 把这次变更记下来，放进一个待处理队列，不急着刷界面。
- 所有同步代码（比如 click 回调里的多行赋值）都会被收集到同一批更新中
- 重复修改同一个响应式字段（如连续三次
count.value++），最终只按最后一次值更新 - 不同 ref 或 reactive 的变更，只要在同一个事件循环内，也会合并进同一次 DOM 刷新
微任务阶段统一执行 DOM 更新
同步代码一结束，浏览器就清空微任务队列。Vue 把 DOM 更新逻辑（flushSchedulerQueue）注册为微任务，所以它会在 Promise.then、MutationObserver 回调之后、下一轮宏任务（如 setTimeout）之前执行。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 先对队列里的 watcher 按 id 排序，确保父组件比子组件先更新
- 再逐个执行
run()：重新渲染 → 生成新 vnode → diff → patch 真实 DOM - 整个过程在单次微任务内完成，浏览器不会中间重绘
想操作更新后的 DOM？用 nextTick 等它完成
nextTick() 不是“等 DOM 渲染完”，而是把你传入的回调也塞进同一个微任务队列，排在 DOM 更新任务之后。所以它能保证你拿到的是刚刷好的 DOM。
立即学习“前端免费学习笔记（深入）”；
- 写法上支持回调函数：
nextTick(() => { /* 此时 DOM 已更新 */ }) - 也支持 await：
await nextTick()，适合组合式 API 中的异步逻辑 - 注意：如果多个
nextTick在同一轮调用，它们会按注册顺序依次执行，都在 DOM 更新之后
生命周期钩子里的更新时机
像 beforeUpdate 和 updated 都发生在 DOM 批量刷新前后，不是每次数据变都触发——只有真正引起视图变化的响应式更新才会走这趟流程。
-
beforeUpdate在 DOM 刷新前调用，此时还能读到旧 DOM，改状态也安全 -
updated在整批 DOM 更新完成后调用，但要注意：它不保证子组件一定更新完（比如有<Suspense>或异步组件） - 想等整个页面视图就绪，推荐在
mounted里用nextTick，而不是依赖updated
