vue的patch不是立即执行，而是经异步流程：数据变化→依赖通知→批量re-render→vnode比对→最小化patch；核心是微任务清空后统一处理，确保dom更新高效且可控。
Vue 响应式系统触发更新后，DOM 补丁（patch）不是立刻生成的，而是经过一套明确、可控的异步流程：数据变化 → 依赖通知 → 批量 re-render → VNode 比对 → 最小化 patch。关键在于“不急着动 DOM”，而是等微任务队列清空后再统一处理。
响应式变化如何启动整个流程
当你修改一个响应式属性（如 this.count = 5），其 setter 被触发，内部立即通知所有依赖它的 Watcher（Vue 2）或 effect（Vue 3）——但此时不会执行 render，更不会操作 DOM。这些 Watcher/effect 被标记为“待更新”，并推入一个异步更新队列。
- 同一事件循环内多次赋值（如连续改 count、name、status）只触发一次队列刷新
- 队列在当前宏任务结束后、下一个宏任务开始前，通过 Promise.then 或 MutationObserver 触发（即微任务末尾）
- 这个机制就是 nextTick 的底层依据，也是 DOM 不“立刻”更新的根本原因
新虚拟 DOM 树是如何生成的
等到 nextTick 执行时，所有待更新的组件会按顺序调用各自的 render 函数，生成一棵全新的 VNode 树。这棵树完全由 JavaScript 对象构成，不含任何真实 DOM 操作。
- render 过程中访问的每个响应式字段，都会触发 getter，完成依赖重收集（为下一轮更新做准备）
- v-if 分支未命中时，对应节点不参与本次 VNode 构建，也就不会建立依赖关系
- 静态节点（如纯文本、无绑定属性的元素）会被标记，diff 阶段直接跳过比对
补丁（patch）如何精准作用到真实 DOM
有了新旧两棵 VNode 树，Vue 调用 patch 函数开始比对。它不递归全树，而是采用“同级双端 Diff”策略，逐层、逐节点判断是否可复用：
- 先用 sameVnode 判断：key 相同 + 标签名一致 + 是否是相同组件/注释/文本节点 → 决定能否复用该节点
- 可复用则递归比对子节点；不可复用则直接卸载旧节点、挂载新节点
- 子节点列表比对采用双端策略（头-头、尾-尾、头-尾、尾-头），兼顾顺序变化与插入/删除场景
- 最终生成一组 DOM 操作指令（create、remove、setAttr、setText 等），仅作用于真正变化的节点及其子树
哪些情况会让 patch 失效或跳过
补丁逻辑高度依赖响应式系统的正确介入。以下操作会导致视图不同步，因为它们绕过了依赖收集或更新触发链：
- 直接给响应式对象新增属性：this.obj.newProp = 'x' → 新属性无 getter/setter，不触发通知
- 用数组原生方法如 filter、concat、slice 返回新数组 → 不触发响应式更新（Vue 只劫持了 push/pop/splice 等变异方法）
- 在 setTimeout 或 Promise.then 中修改数据 → 仍会触发更新，但若在 nextTick 回调外读取 DOM，可能拿到旧状态
- 使用 v-show 时节点始终存在，依赖持续收集；而 v-if 销毁组件后，其依赖被清除，后续数据变也不触发渲染
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
