vue虚拟dom是响应式数据变化触发、经依赖收集与派发更新、vnode比对（diff）及patch操作、最终由nexttick调度真实dom变更的协同机制。
Vue 的虚拟 DOM 不是独立存在的黑盒，而是从响应式数据变化开始，经由依赖收集、派发更新、补丁比对到真实 DOM 操作的一整套协同机制。理解它，关键在于看清“谁触发更新”“谁决定重渲染”“谁执行 DOM 变更”这三步如何咬合。
响应式系统：更新的起点
Vue 2 使用 Object.defineProperty，Vue 3 改用 Proxy，目标一致：拦截对响应式数据（data、ref、reactive）的读写。读取时进行依赖收集（将当前正在执行的渲染函数记为该数据的订阅者），赋值时触发通知（notify），唤醒所有关联的 watcher 或 effect。
- 不是所有对象都响应式——只有通过
reactive()或ref()创建的数据才进入追踪系统 - 深层属性默认可响应，但直接替换整个对象（如
obj = {...}）会丢失响应性，需用Vue.set（Vue 2）或proxy能力保障（Vue 3） - 计算属性（computed）本质是带缓存的响应式 effect，只在依赖变更时重新求值
渲染函数与 VNode：抽象层的桥梁
模板（template）最终被编译为 render 函数，每次执行返回一个描述 UI 结构的 JavaScript 对象——即 VNode（虚拟节点）。它包含标签名、子节点、props、key、指令等信息，但不操作真实 DOM。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章