Vue3 完整渲染流程（从 createApp → mount → update → unmount）

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扁平数组patchVNode → 真实 DOM首次渲染没有旧 VNode直接创建 DOM 元素递归创建子节点处理属性、样式、事件、指令将生成好的 DOM插入到根容器触发onMounted生命周期三、更新阶段数据变化 → 视图更新最核心修改响应式数据 → 触发set代理trigger 派发更新找到收集的渲染 effecteffect 被标记为待执行放入异步更新队列队列通过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 操作形成高效可预测的渲染体系。