如果你已经在用 Vue 3 写业务，却总在遇到性能问题时说不清"为什么慢"，或者面试被问到响应式和 diff 的细节只能背个大概，这门课值得花时间。但如果你连组合式 API 都还没写熟，先把它放一放。
它解决的不是"怎么用"，而是"为什么这样"
市面上大多数 Vue 3 内容停在 API 用法层面：ref 怎么写、watch 怎么监听、生命周期换成了什么名字。这些看官方文档就够了。这门课对准的是另一类问题——当组件更新异常、当依赖收集没按预期触发、当你想手写一个自定义渲染器却不知道从哪下手时，你需要的是对内部机制的理解，而不是再记一条使用规则。
课程围绕渲染器、响应式、编译器三条主线展开，拆解 Vue 3 在设计上做的取舍。比如同样一个模板，Vue 3 的编译器在编译阶段就标记出了哪些节点是静态的、哪些更新只影响某一处，运行时就不用再全量比对。理解这一点，你才能解释清楚"为什么我的列表加个 key 就快了"背后的真实原因。
学完能独立做什么
- 看懂 Vue 3 的响应式系统如何用 Proxy 替代
Object.defineProperty，以及这种替换带来的能力边界变化（比如为什么数组下标和对象新增属性不再是坑）。 - 说清渲染器从创建 vnode、到 patch、再到 diff 的完整流程，能定位一次更新到底卡在哪个环节。
- 理解编译时优化的具体产物——静态提升、补丁标记、块树——并在写模板时有意识地配合这些机制，而不是靠感觉调优。
- 面对内置组件（如 Transition、KeepAlive）的行为，能回到源码层面判断它的实现思路，而不是靠试。
这些能力直接对应两类场景：一是复杂业务里的性能与诡异 bug 排查，二是中高级前端岗位里绕不开的原理追问。它不是让你去改 Vue 源码，而是让你在框架出问题时不再只能等社区答案。
资料的结构与使用方式
资料把内容分成五个模块，从渲染器起步，再进响应式、编译器，最后落到内置实现。每个模块的讲法是"精简核心源码 + 配图"，不追求逐行覆盖，而是抽掉边角、留下主干逻辑。这意味着你需要边看边对照真实的 Vue 3 源码，讲义里的代码是路线图，不是完整实现。
建议的用法是按模块顺序推进，但不必一次吃透。渲染器模块先把 patch 和 diff 的主流程走一遍，允许自己有细节没懂；到响应式模块时，回头再看渲染器里的更新触发，很多之前模糊的地方会接上。每个模块结束后，最有效的检验方式是去 Vue 3 仓库找到对应的源文件，试着指出讲义里简化掉的代码原本长什么样。
适合什么基础
三个前提建议自查：能独立用 Vue 3 完成常规页面开发，写过组合式 API；对 JavaScript 的闭包、原型、Proxy 不陌生；愿意花时间读源码，哪怕一开始读得慢。三条都满足，这门课能帮你把零散的使用经验串成一套可推理的知识结构。
反过来，如果你还在纠结 setup 的写法、或者 JS 基础里原型链和 this 还没理顺，这门课会让你在第二个模块就卡住。先把业务写够，再回来拆原理，顺序不能反。
课程目录
开篇词：<Vue 3></Vue 2> 渲染器：组件是如何被渲染成 DOM 的？ 渲染器：数据访问是如何被代理的？ 渲染器：组件是如何完成更新的？ 渲染器：数组子节点的 diff 算法 响应式原理：基于 Proxy 的响应式是什么样的？ 响应式原理：副作用函数探秘 响应式原理：Vue 3 的 nextTick ？ 响应式原理：watch 函数的实现原理 响应式原理：computed 函数和普通函数有什么不同？ 响应式原理：依赖注入实现跨级组件数据共享 编译器：模板是如何被编译成 AST 的？ 编译器：AST 是如何被转换成 JS AST 的？ 编译器：JS AST 是如何生成渲染函数的？ 编译器：编译过程中的优化细节 内置组件：Transition 是如何实现的？ 内置组件：KeepAlive 保活的原理 内置组件：Teleport 是如何实现选择性挂载的？ 内置组件：Suspense 原理与异步 特殊元素&指令：双向绑定是如何实现的？ 特殊元素&指令：slot 插槽元素是如何实现的？ 结语：再回首，纵观 Vue 3 实现
