vue响应式系统与虚拟dom渲染通过依赖收集→派发更新→重新渲染→patch链条联动：数据劫持感知变化，render生成vnode，diff对比后patch更新真实dom。
Vue 的响应式系统和虚拟 DOM 渲染流程是紧密耦合的：数据劫持负责“感知变化”，虚拟 DOM 负责“计算差异”，而 Patch（打补丁）是把差异真正应用到真实 DOM 的关键环节。它们不是独立运行，而是通过依赖收集 → 派发更新 → 重新渲染 → 对比 patch 这一链条联动起来。
数据劫持：让属性访问可追踪
Vue 2 使用 Object.defineProperty，Vue 3 使用 Proxy，目标一致：在读取（getter）时收集当前正在执行的渲染函数作为依赖，在设置（setter）时通知这些依赖更新。
例如：data() { return { count: 0 } } 中的 count 被劫持后，模板中 {{ count }} 渲染时会触发 getter，此时 Vue 记下“这个渲染函数依赖 count”。
- 每个响应式属性对应一个
Dep实例，管理一组Watcher（Vue 2）或ReactiveEffect（Vue 3） - 组件挂载时，会创建一个渲染 watcher/effect，它包裹了
render()函数，并在首次执行时触发所有模板中用到的数据读取，完成依赖收集
响应式触发更新：setter 唤醒依赖
当 this.count = 1 被赋值，setter 触发，对应 Dep 通知所有收集到的 watcher/effect 重新执行。
注意：这里不会立即操作 DOM，只是标记“需要重新渲染”。Vue 会将更新任务推入异步队列（nextTick 微任务），批量处理，避免重复渲染。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章