vue数据变化通过响应式系统通知依赖，组件更新函数入异步队列，nexttick批量执行render生成新vnode，仅被读取的响应式数据变化才触发重渲染。
当 Vue.js 中的数据发生变化时，VNode 的重新生成并非直接发生，而是通过一套响应式驱动的更新链条逐步触发。核心在于：数据变化 → 依赖通知 → 组件更新 → render 函数重执行 → 新 VNode 生成。
响应式系统捕获变化并触发更新
Vue 2 使用 Object.defineProperty，Vue 3 使用 Proxy，为响应式数据建立 getter/setter。当数据被修改时，setter 会通知所有依赖该数据的 Watcher（Vue 2）或 effect（Vue 3）。组件实例自身就是一个典型的响应式消费者，其 render 函数被包裹在 effect 中（Vue 3）或作为 Watcher 的 getter（Vue 2），因此会收到通知。
组件进入异步更新队列
收到通知后，Vue 不会立即执行更新，而是将组件的更新函数（如 updateComponent 或 componentEffect）推入一个异步队列（nextTick 队列）。这样可以：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章