Vue3 完整渲染流程（从 createApp → mount → update → unmount）
一句话总纲
创建应用实例 → 解析组件生成渲染函数 → 首次渲染生成 VNode → patch 创建 DOM 挂载到页面
→ 数据变更触发响应式更新 → 异步队列调度重新渲染 → 新旧 VNode 使用优化 Diff 更新 DOM
→ 卸载时清理副作用、移除 DOM
一、初始化阶段：createApp
- 调用
createApp(App)创建应用实例 - 初始化全局配置、全局指令、全局组件、插件安装
- 内部创建根渲染器 renderer，统一管理 DOM 操作逻辑
- 返回 app 实例，等待
mount
二、挂载阶段：app.mount('#app')
- 根据选择器获取根容器 DOM
- 创建根组件实例
- 执行组件初始化流程 ：
- 处理 props
- 处理 slots
- 执行 setup 函数
- 处理 data、computed、methods 等（兼容 Options API）
- 创建响应式系统代理，对 data/reactive/ref 进行 Proxy 劫持
- 创建渲染副作用 effect（渲染 effect）
这是组件更新的核心调度单元 - 执行 render 函数生成 VNode
- 运行时执行编译后的渲染函数
- 静态节点已提升，动态节点带 PatchFlag
- 动态节点被收集进 Block Tree 扁平数组
- patch（VNode → 真实 DOM）
- 首次渲染没有旧 VNode，直接创建 DOM 元素
- 递归创建子节点
- 处理属性、样式、事件、指令
- 将生成好的 DOM 插入到根容器
- 触发
onMounted生命周期
三、更新阶段：数据变化 → 视图更新（最核心）
- 修改响应式数据 → 触发
set代理 - trigger 派发更新 ，找到收集的渲染 effect
- effect 被标记为待执行，放入异步更新队列
- 队列通过 nextTick（微任务） 调度，避免同步多次更新
- 微任务执行：批量执行所有待更新的渲染 effect
- 组件重新执行
render，生成新 VNode - 新旧 VNode 进行 Diff + patch
- 只走 Block Tree 里的动态节点数组
- 根据 PatchFlag 靶向更新，只对比动态部分
- 同层级子节点使用双端比较 + 最长递增子序列 LIS
- 尽可能复用 DOM，最少移动、最少创建删除
- 完成 DOM 更新
- 触发
onUpdated
四、卸载阶段：unmount
- 触发
onBeforeUnmount - 递归卸载子组件
- 清理所有副作用
- 停止渲染 effect
- 移除依赖收集（dep 清理）
- 移除事件监听、定时器、DOM 引用
- 取消指令绑定
- 从父级移除真实 DOM
- 触发
onUnmounted
三者如何嵌入整个流程（必加分总结）
- 响应式 ：
贯穿全程，负责在数据变化时精准触发组件的渲染 effect，控制更新范围。 - 编译优化 ：
在 render 生成 VNode 时生效，提前标记动态内容、提升静态节点，让 Diff 极轻。 - Diff 算法 ：
在更新 patch 时生效，用最小 DOM 操作完成视图更新。
面试满分口述版（直接背）
- createApp 初始化应用、安装插件、创建渲染器；
- mount 创建组件实例、执行 setup、初始化响应式、创建渲染 effect，执行 render 生成 VNode，通过 patch 创建 DOM 并挂载；
- 更新时，数据变化触发 trigger，把渲染 effect 加入微任务队列，批量执行重新渲染，生成新 VNode；
- 结合 Block Tree、PatchFlag 做靶向 Diff，再通过双端比对 + LIS 实现最少 DOM 操作；
- unmount 时递归清理副作用、移除 DOM、完成卸载。
- 整个流程由响应式控制更新范围，编译优化减少 Diff 成本，Diff 最小化 DOM 操作，形成高效可预测的渲染体系。