Vue渲染器是可配置的同步引擎，通过render函数调度mount/patch/unmount流程，依赖宿主接口适配多平台，核心逻辑解耦且稳定。

Vue 渲染器不是把虚拟节点“翻译”成 DOM 的翻译器，而是一套可配置的同步引擎——它不关心平台细节，只专注描述“该创建什么、怎么更新、何时清理”，所有平台适配都交给宿主接口完成。

渲染器的核心入口是 render 函数

它接收两个参数：一个虚拟节点（vnode）和一个容器（container）。首次调用时触发挂载（mount），后续响应式变化会再次调用，进入更新（patch）流程。这个函数本身不直接操作 DOM，而是调度内部模块协作完成任务。

• 如果是普通标签节点（如 div），走 mountElement 流程：调用宿主的 hostCreateElement 创建原生节点，再递归处理子节点
• 如果是组件节点，走 mountComponent：先创建组件实例、激活生命周期、执行其自身的 render 函数得到子 vnode，再交由同一套渲染逻辑处理
• 如果是文本或注释等简单类型，直接调用对应宿主方法（如 hostCreateText）生成内容节点

更新靠 patch 函数做精准比对

当响应式数据变化导致新 vnode 产生，渲染器不会全量重建 DOM，而是运行 patch 函数对比新旧 vnode 树。它只关注关键字段：props、children、key、ref、class、style 等，跳过未变动的部分。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 属性变化 → 调用 hostPatchProp 更新（例如 setAttribute 或直接赋值 node.id）
• 子节点结构变化（增删/移动）→ 调用 hostInsert、hostRemove、hostSetElementText 等协调真实节点位置与内容
• key 相同但 type 不同（比如 div → span）→ 先卸载旧节点，再创建新节点，避免复用错误

宿主接口（host interface）决定渲染目标

渲染器本身不写死任何平台 API，它通过一个配置对象（rendererOptions）注入能力。Web 平台传入 document.createElement，小程序传入 createSelectorQuery，SSR 传入返回字符串的 createElement，同一套 patch 逻辑就能跑在所有环境。

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

• 必需的宿主函数约 10 个，包括创建元素、设置文本、插入/移除节点、更新属性、处理事件等
• 新增平台只需实现这些函数，无需改动 diff 算法、响应式系统或组件机制
• 这种解耦让 Vue 的核心渲染逻辑稳定，扩展性极强

卸载过程不只是删 DOM

unmount 不是简单调用 removeChild，而是一个递归清理链：移除真实节点、销毁组件实例、清除副作用、解绑事件监听器、释放 ref 引用、回收内存。尤其对含定时器、异步请求或第三方库集成的组件，漏掉某一步就可能引发内存泄漏。

• 组件 unmount 会触发 beforeUnmount 和 unmounted 钩子
• 每个子 vnode 都要单独 unmount，确保嵌套结构彻底释放
• 宿主函数如 hostRemove 和 hostDestroy 分工明确：前者管视图层，后者管逻辑层资源