Vue.js渲染链路是模板→编译→VNode→响应式更新→Patch的闭环流程：先将模板编译为渲染函数，生成虚拟DOM树；数据变化触发依赖更新并重执行render生成新VNode；最后通过diff算法比对新旧VNode并更新真实DOM。
Vue.js 的渲染链路是一条从开发者写的模板出发，最终生成并更新真实 DOM 的闭环流程。它不是直接操作页面，而是靠编译、响应式和虚拟 DOM 三层协作完成的。
模板编译：把 HTML 变成可执行函数
你写的
- 解析（Parse）：把模板字符串拆解成抽象语法树（AST），记录节点类型、属性、子节点等结构信息
- 优化（Optimize）：标记静态节点（比如纯文本或没有绑定的元素），后续 diff 时跳过比对，提升性能
-
生成（Codegen）：把优化后的 AST 转成 JavaScript 渲染函数，例如
_c('div', { attrs: {} }, [_v(_s(msg))])
渲染函数执行：产出虚拟 DOM 树（VNode）
挂载阶段调用编译好的 render 函数，它返回一个 VNode 对象树。每个 VNode 是轻量级 JS 对象，包含 tag、props、children 等字段，不直接操作真实 DOM。
Vue3 进一步做了优化：
- 静态提升：把模板中完全不变的部分提前生成，避免每次 render 重复创建
- Block 机制：将动态子节点组织成数组，diff 时能快速定位变化区域
响应式驱动更新：数据变 → 触发重渲染
当 this.msg = 'new' 时，响应式系统通过 Proxy 拦截 set 操作，通知对应依赖的 effect（如组件的 render watcher）重新执行 vm._render()，生成新的 VNode 树。
这个过程依赖两个关键动作：
- 依赖收集：render 函数首次执行时读取响应式数据，自动建立“数据 → effect”的映射
- 触发更新：数据变更后，所有相关 effect 被批量调度，进入 nextTick 队列统一处理
Patch 算法：新旧 VNode 对比并更新真实 DOM
新旧两棵 VNode 树进入 patch 流程，核心是深度优先遍历 + 同层节点双指针比对（即 diff 算法）：
- 相同节点类型且 key 一致时，复用 DOM 元素，只更新 props 或 textContent
- 节点类型不同或 key 不匹配，则直接销毁旧节点、创建新节点
- 列表更新采用“最大递增子序列”优化，减少移动操作
最终，patch 将差异应用到真实 DOM 上，完成视图同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
