Vue的渲染机制是调度器与渲染器协同工作的闭环系统：调度器通过微任务批量合并更新、控制时机，渲染器依据vnode及patchFlags精准执行mount/patch/unmount，二者以vnode为契约实现高效响应式更新。

Vue 的渲染机制不是“模板→DOM”的单向翻译，而是渲染器（Renderer）与调度器（Scheduler）协同工作的闭环系统：调度器决定“什么时候更新”，渲染器决定“怎么更新”。二者分工明确、契约清晰，共同支撑响应式更新的高效与可控。

调度器负责时机控制：从响应式变化到更新触发

当响应式数据发生变化时，不会立刻操作 DOM。Vue 会把更新任务推入一个异步队列，由调度器统一管理：

• 每个响应式副作用（如组件 render 函数）都关联一个 Watcher 或 effect，数据变更时触发其重新执行
• 调度器默认采用微任务（Promise.then）批量合并重复更新，避免同一轮事件循环中多次 patch
• 支持手动控制：nextTick() 确保在 DOM 更新后执行回调；flush: 'sync' / 'post' 可调整任务优先级
• 防抖与去重：相同组件的多次状态变更，只保留最后一次 render 调用，减少冗余 vnode 生成

渲染器专注视图转化：mount/patch/unmount 三阶段执行

渲染器是平台无关的同步引擎，不直接操作 DOM，而是通过宿主接口（host interface）委托具体平台行为：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 挂载（mount）：首次调用 render(vnode, container)，递归创建真实节点——普通元素走 hostCreateElement，组件走 mountComponent 并触发 setup() 和 render()
• 更新（patch）：对比新旧 vnode 树，仅更新变动字段（props、children、key 等），跳过静态节点或未变属性；利用 patchFlags 快速定位需更新类型（如 TEXT、CLASS）
• 卸载（unmount）：递归清理事件监听器、定时器、子组件实例等资源，防止内存泄漏

二者协作的关键接口：vnode 是唯一纽带

vnode 不是中间产物，而是调度器与渲染器之间精确传递意图的结构化协议：

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

• 调度器产出的新 vnode 携带完整意图：类型（element/component）、动态标记（patchFlags）、依赖追踪信息（block、dynamicChildren）
• 渲染器依据 vnode 中的 type 和 flags 决定执行路径，例如：type === 'div' && patchFlag & 2 → 仅更新 class，跳过 children 对比
• 静态提升和 hoist 静态 vnode 在编译阶段完成，减少运行时调度压力，让调度器更轻量

实际影响：性能与调试的落点在此

理解这个配合关系，能直接解释常见现象和优化方向：

• 为什么 this.$nextTick 后才能拿到更新后的 DOM？—— 因为 patch 完成在微任务末尾，DOM 修改发生在该轮任务结束前
• 为什么 v-if 切换组件比 v-show 更耗时？—— v-if 触发 unmount + mount 全流程；v-show 仅 patch style.display
• 为什么加 key 能提升列表更新效率？—— 让 patch 阶段复用节点而非销毁重建，调度器可复用已有 effect 实例
• 服务端渲染（SSR）或小程序适配，只需替换 host 接口，调度逻辑完全复用——这正是渲染器解耦设计的价值