Vue响应式系统与虚拟DOM patch算法构成闭环协作链条：数据变更触发依赖更新，render函数生成新VNode，patch算法比对并精准更新DOM；响应式系统捕获变化并建立数据与渲染函数的依赖关系，patch算法通过sameVnode和双端diff实现最小化DOM操作，key是节点复用的关键依据。
Vue 的响应式系统和虚拟 DOM 的 patch 算法不是各自运行的两个模块，而是一个闭环协作链条：数据变 → 触发依赖更新 → 重新渲染生成新 VNode → patch 比对并精准打补丁到真实 DOM。
响应式系统是“变化感知器”
它负责捕获数据何时变了、谁在用这个数据。Vue 2 用 Object.defineProperty，Vue 3 改用 Proxy 劫持数据读写：
- 读取数据（get）时，自动把当前正在执行的 render 函数记为该数据的依赖
- 修改数据（set）时，通知所有关联的依赖（比如组件的 effect）重新执行
- 没被 render 函数访问过的属性，即使改了也不会触发视图更新
render 函数是连接两者的“胶水”
每个组件的 render 函数会被 Vue 包装成一个响应式副作用（effect），它的执行过程天然完成两件事：
- 生成一棵 VNode 树（即虚拟 DOM）
- 在读取响应式数据的过程中，自动建立“数据 ↔ 渲染函数”的依赖关系
也就是说，只有 render 中用到的数据，才会参与后续的更新流程；没进 render 的数据变更，patch 就不会启动。
立即学习“前端免费学习笔记（深入）”；
Patch 算法是“精准动刀手”
它不关心数据为什么变，只专注一件事：怎么用最小操作把新 VNode 同步到真实 DOM 上。关键步骤包括：
- 先调 sameVnode 判断新旧节点能否复用（比对 tag、key、isComment、data 等）
- 能复用就进入 patchVnode，只更新属性、样式、事件或子节点列表
- 不能复用就直接卸载旧节点、挂载新节点
- 子节点更新用双端 diff，兼顾顺序变动与增删，避免 O(n²) 复杂度
key 是 patch 正确工作的前提
在 v-for 列表中，key 不只是性能优化手段，更是 patch 算法识别节点身份的唯一依据：
- 没有 key 或 key 重复，可能导致节点错位复用，引发状态混乱（比如输入框失焦、动画异常）
- key 必须稳定且唯一，推荐用数据本身的 id，避免用 index
- key 参与 sameVnode 判断，直接影响节点是否被复用
