Vue渲染流程是响应式驱动、虚拟DOM为中介、生命周期深度参与的闭环机制：数据变化→依赖通知→重新render→生成新VNode→diff对比→patch更新DOM。
Vue 渲染流程不是模板直接变 DOM 的线性操作，而是一套由响应式系统驱动、以虚拟 DOM 为中间层、生命周期钩子深度参与的闭环机制。核心在于：数据变化 → 依赖通知 → 重新 render() → 生成新 VNode → diff 对比 → patch 更新真实 DOM。
模板如何变成可执行的 render 函数？
Vue 在挂载前需确保实例拥有一个返回 VNode 的 render 函数。这个过程分两种路径：
- 显式提供：你在
new Vue({ render: h => h('div') })中直接写好 render 函数，跳过编译 - 隐式编译：未提供 render，但配置了
template或el（含 HTML），Vue 会调用内置编译器（compiler）把模板字符串解析为 AST，再优化生成可执行的 render 函数 - 若两者都缺失，则 fallback 为创建一个空注释节点的默认 render：
createEmptyVNode
这一步完成后，beforeMount 钩子被触发——此时 render 函数已就绪，但 VNode 还没生成，$el 仍是旧值或 null。
首次渲染：VNode 生成与 patch 到页面
mountComponent 是挂载主干逻辑的入口，它启动一个专属的 渲染 Watcher，并立即执行一次 render：
立即学习“前端免费学习笔记（深入）”；
- 调用 render()，生成一棵完整的初始 VNode 树（含组件节点、插槽、指令等抽象结构）
- 调用
patch()（也叫__patch__），将 VNode 树“打补丁”到目标容器 - 如果是首次挂载（目标为空），
patch内部递归调用createElm创建真实 DOM 元素 - 遇到组件节点时，触发子组件初始化流程（同样走 beforeCreate → created → ... → mounted）
- v-model、v-show 等指令也在 patch 阶段激活绑定逻辑
当所有真实 DOM 插入文档流后，mounted 钩子被调用，$el 正式可用，组件进入可交互状态。
响应式如何联动后续更新？
挂载完成不等于流程结束。Vue 已在初始化阶段对 data 执行响应式转换（Vue 2 用 Object.defineProperty，Vue 3 用 Proxy），建立了完整的依赖收集关系：
- 数据被读取时（如 render 中访问
this.msg），自动将当前渲染 Watcher 记为该属性的依赖 - 数据被修改时，通知对应 Watcher 重新执行 render()，生成新 VNode
- 新旧 VNode 进入 diff 算法，只更新有差异的节点，避免整树重绘
- diff 后调用 patch，复用或替换真实 DOM 节点，高效完成视图更新
整个过程由 beforeUpdate → updated 钩子包裹，形成可预测、可调试的更新闭环。
不复杂但容易忽略：挂载不是终点，而是响应式渲染循环的起点。
