Vue的响应式系统与虚拟DOM是紧密协作的闭环机制：响应式系统通过getter/setter或Proxy劫持数据并收集依赖，数据变更触发effect重新执行render生成新VNode，再经diff与patch高效更新真实DOM。
Vue 的响应式系统和虚拟 DOM 渲染不是两个独立模块，而是一套紧密协作的闭环机制：数据变化触发依赖通知，依赖通知驱动视图更新，而视图更新通过虚拟 DOM 的 diff 与 patch 实现高效重渲染。
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
响应式系统是“感知变化”的引擎
Vue 2 使用 Object.defineProperty，Vue 3 使用 Proxy，对数据对象进行劫持，实现对属性读取（get）和修改（set）的拦截。关键在于：在 get 阶段收集依赖（即当前正在执行的渲染函数），在 set 阶段触发依赖更新。这个“依赖”本质上是一个 Watcher（Vue 2）或 effect（Vue 3），它关联着一个组件的 render 函数。
虚拟 DOM 是“执行更新”的画布
每个组件实例在首次渲染时，会执行其 render 函数生成一棵虚拟 DOM 树（VNode）。这棵树是 JS 对象描述的真实 DOM 结构，轻量、可比较、可操作。当响应式数据变化导致 re-render 时，Vue 不直接操作真实 DOM，而是：
• 重新调用 render 函数，生成新的 VNode 树
• 将新旧两棵 VNode 树进行 深度 diff 比较，找出最小差异节点
• 对差异部分执行 patch（打补丁），精准更新真实 DOM
二者如何联动？靠“渲染副作用”绑定
Vue 在组件挂载阶段，会将组件的 render 函数包装为一个响应式的副作用函数（effect）。这个函数：
• 执行时访问响应式数据 → 触发 getter → 自动收集自身为该数据的依赖
• 数据变更时 → 触发该 effect 重新执行 → 生成新 VNode → 进入 diff-patch 流程
这意味着：**没有被 render 函数读取的数据，不会触发视图更新；没有触发 re-render 的变化，虚拟 DOM 就不会介入**。
理解这个关联，能避开常见误区
• 直接给对象新增属性（如 vm.obj.newKey = val）不会触发更新 —— 因为新属性未被响应式劫持，也未参与依赖收集
• 使用 v-if 切换的子组件，其 render 函数不执行 → 对应响应式依赖不建立 → 后续数据变也不更新该分支
• computed 和 watch 本质也是响应式副作用，但它们不产生 VNode，所以不参与虚拟 DOM 渲染流程，只负责逻辑联动
