一：引言

Vue 组件的渲染过程是一个从模板代码到真实 DOM 节点的高效转换流程。其核心机制基于‌虚拟 DOM (Virtual DOM)‌，主要包含‌编译‌、‌挂载‌和‌更新‌三个关键阶段

二：全流程

第一阶段：编译 (Compile)=>将开发者编写的模板转换为可执行的渲染函数。

   ‌模板解析‌：Vue 编译器分析 HTML 模板。

‌    生成渲染函数‌：模板被编译成一个 render 函数。执行后会返回一个虚拟 DOM 树（VNode Tree）。

‌    编译时优化‌：Vue 编译器会进行静态分析，标记静态节点,跳过比对，提升性能。

第二阶段：挂载 (Mount)=>将虚拟 DOM 转换为真实的 DOM 节点并插入页面。

‌    执行渲染函数‌：运行时渲染器调用 render 函数，生成初始的虚拟 DOM 树。

   ‌创建真实 DOM‌：渲染器遍历虚拟 DOM 树，根据 VNode 的信息创建真实的 DOM 节点。

‌    响应式追踪‌：挂载过程作为响应式副作用执行，会追踪渲染过程中用到的所有响应式数据依赖。

第三阶段：更新 (Update/Patch)=>当组件依赖的响应式数据发生变化时，触发更新流程。

   ‌重新渲染‌：数据变化触发副作用重新运行，再次调用 render 函数，生成新的虚拟 DOM 树。

   ‌Diff 算法：运行时渲染器将‌新虚拟 DOM 树‌与‌旧虚拟 DOM 树‌进行比较。

‌    补丁 (Patch)‌：将计算出的差异应用到一个真实的 DOM 上，完成视图更新。

三：总结

‌Template‌ (模板) -> ‌Compiler‌ (编译器) -> ‌Render Function‌ (渲染函数)

‌Render Function‌ -> ‌Virtual DOM‌ (虚拟节点树)

‌Virtual DOM‌ -> ‌Renderer‌ (渲染器/Diff算法) -> ‌Real DOM‌ (真实节点)

四：拓展

1：动态组件渲染=>使用 <component> 元素配合 is 属性

原理=>is 属性的值可以是注册过的组件名称字符串，也可以是直接导入的组件对象。当 is 的值变化时，Vue 会卸载当前组件并挂载新组件（除非使用 <keep-alive> 缓存）

2：优化策略

‌静态内容缓存=>模板中不带动态绑定的部分会被编译为静态 VNode 甚至静态 HTML 字符串，渲染时直接复用，无需比对

带编译时信息的虚拟 DOM=>Vue 编译器会在生成的代码中留下标记（如静态提升、事件缓存），让运行时渲染器能走捷径，减少不必要的遍历和内存分配

批量更新=>响应式系统会将多次数据变更合并，异步更新 DOM，避免频繁的 DOM 操作