vue渲染器是平台无关的可配置同步引擎，通过宿主接口适配多端，核心职责为调度mount/patch/unmount流程，将组件声明的vnode转化为真实视图。

Vue 的渲染机制核心在于**渲染器（Renderer）如何将组件定义转化为真实视图**，而组件本身则通过明确的接口向渲染器“声明自己想要什么”，二者通过标准化协议协作。这不是单向驱动，而是双向契约：组件提供结构与响应式数据，渲染器负责调度、比对与更新。

渲染器是平台无关的执行引擎

Vue 的 createRenderer() API 抽象出一整套底层操作接口，比如 createElement、patchProp、insert、remove 等。这些方法不关心 DOM，只约定“如何创建节点”“如何更新属性”“如何插入子树”。
这意味着同一套 Vue 运行时，可以对接浏览器 DOM、Web Worker、Canvas、甚至终端字符界面——只要实现对应平台的 RendererOptions，就能复用响应式系统、虚拟 DOM diff、生命周期等全部能力。

组件通过三种主要方式描述渲染意图

组件并不直接操作 DOM，而是通过以下任一方式向渲染器表达“我长什么样”：

• template 字符串：最常用，由编译器在构建时或运行时转为 render 函数；语法贴近 HTML，但本质仍是生成 vnode 的逻辑
• render 函数：显式调用 h() 创建 vnode 树，完全编程式，适合动态结构、逻辑复杂或需要类型推导的场景
• setup 返回 vnode（组合式 API）：在 setup() 中直接返回一个函数，该函数接收 props 和 slots 并返回 vnode，天然支持响应式依赖追踪

三者最终都归一为一个可执行的 render 函数，供渲染器在挂载和更新时反复调用。

vue3-ant-design-vue-component-skill

封装基于 Vue 3 + Ant Design Vue 的通用业务组件，提供标准化模板与最佳实践。

下载

组件接口的关键字段决定渲染行为

一个组件对象（或 defineComponent 配置）中，以下字段直接参与渲染流程：

• render：最高优先级，若存在，template 被忽略
• template：字符串模板，仅在含编译器的构建版本中生效；以 # 开头时会作为 CSS 选择器查找 <template></template> 元素内容
• compilerOptions：微调模板编译行为，例如自定义指令、模块解析规则，仅影响当前组件
• slots（Vue 3.3+）：纯类型辅助字段，帮助 TypeScript 在 render 函数中正确推导插槽作用域参数类型，不参与实际运行

vnode 是组件与渲染器之间的通用语言

无论用哪种方式定义组件，最终产出都是一个 vnode（虚拟节点）对象，形如：

{ type: 'div', props: { id: 'app', onClick: handler }, children: [...] }

这个对象不含任何平台细节，只描述“要什么”，比如标签名、属性、事件、子节点。渲染器拿到它后，才依据自己的 RendererOptions 去创建真实节点、绑定事件、插入文档流。vnode 的设计让组件逻辑彻底脱离 DOM，也使 SSR、测试、跨端成为可能。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！