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 队列）。这样可以：

用于自动切换项目中适合的node 版本

根据 package.json 中的 engines 字段自动检测 Node.js 版本需求，未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。

下载

• 避免同一事件循环中对同一数据的多次修改引发重复渲染
• 合并多个状态变更，只触发一次 re-render
• 确保 DOM 更新在下一个 tick 批量进行，提升性能

render 函数重新执行，产出新 VNode

当队列刷新时，组件的更新函数被调用，其核心动作是重新执行 render 函数（无论是模板编译生成的还是用户手写的）。此时：

立即学习“前端免费学习笔记（深入）”；

• 响应式数据被读取，触发 getter，建立新的依赖追踪（为下一次更新做准备）
• JSX 或 createElement 调用重新执行，基于最新数据构建一棵全新的 VNode 树
• 这个新 VNode 与上一次的旧 VNode 一起传入 patch（或 diff）过程，进行精细化 DOM 更新

注意：不是所有数据变化都导致 VNode 重生成

只有被当前组件 render 函数实际读取（即触发过 getter）的响应式数据变化，才会触发该组件的更新。例如：

• data 中定义但未在模板或 render 中使用的字段，修改它不会引起 re-render
• 使用 v-if 切换的分支内访问的数据，仅在对应分支激活时才纳入依赖
• setup 中未 return、未在 template 中使用的 ref，也不会触发视图更新