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 等，跳过未变动的部分。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(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 分工明确：前者管视图层，后者管逻辑层资源
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
