要吃透 Vue.js 渲染机制，需从 app.mount() 入口出发，依次理解编译器将模板转为渲染函数、响应式系统触发重渲染、以及 patch 函数执行 DOM 更新的完整链路。
想真正吃透 Vue.js 渲染机制，不能只停留在“会用”层面，得顺着它从模板到屏幕的完整链路，一层层拆解。核心不在读完所有代码，而在抓住几个关键节点，理解它们如何咬合运转。
从挂载入口开始，理清主干流程
一切始于 app.mount() 或 new Vue({ el: ... })。这是整个渲染流水线的启动开关。建议直接打开 packages/runtime-dom/src/index.ts（Vue 3）或 src/platforms/web/entry-runtime-with-compiler.js（Vue 2），找到 mount 方法的实现。重点看它做了三件事：确认根容器、触发组件初始化、调用渲染器的 patch 函数。这一步帮你建立全局视角——后续所有动作，都是为最终把虚拟节点“打补丁”到真实 DOM 上服务的。
聚焦编译器：读懂模板怎么变成函数
如果你用的是单文件组件或字符串模板，那 compiler-core 就是必经之路。不必一上来啃完整解析器，先盯住 baseCompile 这个总入口。然后分三步走：
- 看
parse：用一个简单模板（比如<div>{{ msg }}</div>）调试baseParse，观察它如何产出带 type、props、children 的 AST 节点树； - 看
transform：重点找vIf和vFor的转换逻辑，理解指令如何被提取成对应的条件/循环逻辑并注入 AST； - 看
generate：对比生成的渲染函数代码（如_c('div', [_v(_s(msg))])），明白 AST 节点是如何映射成创建 VNode 的调用链的。
深挖响应式与渲染的联动
数据变，视图才动。这个“动”的触发点，就在响应式系统和渲染器的交界处。关键路径是：data.xxx = newValue → 触发 setter → dep.notify() → 所有依赖该数据的 Watcher（Vue 2）或 effect（Vue 3）被加入更新队列 → nextTick 后执行 flushSchedulerQueue → 调用组件的 render 函数重新生成 VNode → patch 对比并更新 DOM。建议在 reactivity 模块中打断点，配合一个带 v-if 的简单组件，亲眼看到数据变化后，哪段代码真正触发了重渲染。
立即学习“前端免费学习笔记（深入）”；
动手改源码，验证你的理解
光读不动手，容易浮在表面。可以尝试几个小实验：
- 在
generate阶段的输出前加一行console.log(ast)，看看不同模板生成的 AST 差异； - 注释掉
optimizer中静态节点标记的逻辑，对比开启/关闭优化时生成的渲染函数体积； - 在
patch函数里打印新旧 VNode 的 diff 结果，直观感受虚拟 DOM 的比对过程。
这些操作不需要你修改核心逻辑，但能极大强化你对数据流向和关键决策点的感知。
