mksz608-Vue3源码解析，打造自己的Vue3框架，领悟尤大思维精髓（ 17章完结）

前端开发

课程简介

技术视角与基础门槛本课程旨在解决开发者“知其然不知其所以然”的痛点，通过从零实现迷你 Vue 3 框架，深入剖析响应式系统、编译器管线及渲染引擎的核心逻辑。它不侧重业务代码的快速编写，而是聚焦于底层架构的设计取舍。学习前有严格的技术门槛：必须熟练掌握 JavaScript 的闭包、原型链、Proxy 及 Reflect 对象，具备扎实的 TypeScri…

已有 1 人浏览发布 2026-10-07 更新 2026-10-11

技术视角与基础门槛

本课程旨在解决开发者“知其然不知其所以然”的痛点，通过从零实现迷你 Vue 3 框架，深入剖析响应式系统、编译器管线及渲染引擎的核心逻辑。它不侧重业务代码的快速编写，而是聚焦于底层架构的设计取舍。学习前有严格的技术门槛：必须熟练掌握 JavaScript 的闭包、原型链、Proxy 及 Reflect 对象，具备扎实的 TypeScript 泛型与类型推导能力，并理解 Vite 等现代构建工具的原理。若基础薄弱，建议先补充 ES6+ 高级特性及 DOM 操作知识。初学者应首先精读“框架设计前瞻”章节，厘清命令式与声明式编程的范式差异，明确运行时与编译时的边界，这是理解后续所有代码复杂度的理论基石，切勿跳过直接看代码实现。

学习路径与重点模块

建议采取“理论先行，重点突破”的非线性学习策略。第一阶段聚焦核心原理，重点攻克编译器章节，深入理解模板字符串如何被解析为抽象语法树（AST），以及如何通过代码生成将静态与动态节点转化为高效的渲染函数。这一过程涉及大量的正则匹配与树遍历算法，是提升编程功底的最佳实战场。第二阶段进入响应式系统底层，研究依赖收集与触发的机制，理解副作用函数的执行时序。最后结合“运行时+编译时”合并章节，分析应用初始化流程在不同场景下的构建逻辑。每看完一个核心模块，务必暂停视频，在本地工程中手动实现对应算法，如手写简易的 `watchEffect` 或模板解析器。这种“看-思-写”的循环能确保将视频中的设计思路转化为可落地的工程能力，避免陷入“看懂了但写不出”的陷阱。

独立产出与资料配合

完成课程并独立复现核心模块后，你将具备设计轻量级前端框架的能力，能够针对大型应用解决状态管理混乱、自定义编译优化指令缺失及深层性能瓶颈分析等难题。资料包中的视频主要承担“设计意图阐述”与“逻辑脉络梳理”的功能，而源码则用于验证实现细节与边界情况。二者需紧密配合：观看视频时重点关注架构决策背后的权衡（Trade-off），编码时则需严格对照源码检查类型定义与内存管理。特别建议重点练习从模板到可执行代码的全链路转化过程，这是锻炼工程思维的关键。不要死记硬背 API 行为，而要关注“为何这样设计”，例如编译器如何通过静态提升优化复用性。通过这种深度重构与思维复盘，你不仅能读懂源码，更能将抽象设计与取舍的方法论迁移到其他 UI 库或状态管理库的开发中，形成可落地的技术视野与架构能力。

课程目录

第02章框架设计前瞻-框架设计中的一些基本概念12 集

2-12Vue3框架设计概述.mp4 [28.7 MB]
2-3编程范式之声明式编程.mp4 [26.2 MB]
2-5企业应用的开发与设计原则.mp4 [42.8 MB]
2-10运行时+编译时.mp4 [102.2 MB]
2-4命令式VS声明式.mp4 [42.7 MB]
2-2编程范式之命令式编程.mp4 [40.0 MB]
2-8什么是运行时？.mp4 [101.5 MB]
2-11什么是副作用.mp4 [23.9 MB]
2-7.vue中的html是真实的html吗？.mp4 [30.5 MB]
2-13扩展：所谓良好的`TypeScript`支持，是如何提供.mp4 [38.6 MB]
2-6为什么说框架的设计过程其实是一个不断取舍的过程？.mp4 [35.8 MB]
2-9什么是编译时？.mp4 [44.4 MB]

第13章compiler编译器-编译时核心设计原则5 集

13-1前言.mp4 [46.6 MB]
13-4AST转化为JavaScriptAST，获取codege.mp4 [41.0 MB]
13-3抽象语法树-AST.mp4 [32.1 MB]
13-2模板编译的核心流程.mp4 [18.2 MB]
13-6总结.mp4 [6.7 MB]

第16章运行时+编译时-合并vue处理逻辑3 集

16-2基于render渲染的createApp的构建逻辑.mp4 [107.9 MB]
16-4总结.mp4 [13.3 MB]
16-3基于template渲染的createApp的构建逻辑.mp4 [43.4 MB]

第15章compiler编译器-深入编辑器处理逻辑（困难）14 集

15-1前言.mp4 [9.7 MB]
15-9基于编辑器的指令(v-xx)处理：指令解析的整体逻辑.mp4 [36.7 MB]
15-2响应性数据的编辑器处理：响应性数据的处理逻辑.mp4 [44.0 MB]
15-3响应性数据的编辑器处理：AST解析逻辑.mp4 [37.6 MB]
15-14总结.mp4 [6.6 MB]
15-10困难-基于编辑器的指令(v-xx)处理：AST解析逻辑.mp4 [123.9 MB]
15-4响应性数据的编辑器处理：JavaScriptAST转化逻.mp4 [29.1 MB]
15-13基于编辑器的指令(v-xx)处理：生成render函数.mp4 [79.1 MB]
15-7响应性数据的编辑器处理：render函数的执行处理.mp4 [37.2 MB]
15-6响应性数据的编辑器处理：generate生成render.mp4 [44.4 MB]
15-11困难-基于编辑器的指令(v-xx)处理：JavaScr.mp4 [245.5 MB]
15-8多层级模板的编辑器处理：多层级的处理逻辑.mp4 [28.0 MB]
15-5响应性数据的编辑器处理：render转化逻辑分析.mp4 [18.0 MB]
15-12 基于编辑器的指令(v-xx)处理：JavaScript AST ，transform 的转化逻辑.mp4 [23.4 MB]

第07章响应系统 - watch && computed12 集

7-3源码阅读：computed的响应性，跟踪Vue3源码实现逻.mp4 [101.6 MB]
7-11框架实现：初步实现watch数据监听器.mp4 [111.8 MB]
7-4框架实现：构建ComputedRefImpl，读取计算属性.mp4 [61.4 MB]
7-10框架实现：深入scheduler调度系统实现机制.mp4 [149.2 MB]
7-2源码阅读：computed的响应性，跟踪Vue3源码实现逻.mp4 [99.4 MB]
7-6框架实现：computed的缓存性.mp4 [148.3 MB]
7-13框架实现：完成watch数据监听器的依赖收集.mp4 [20.6 MB]
7-9源码阅读：响应性的数据监听器watch，跟踪源码实现逻辑(.mp4 [99.7 MB]
7-5框架实现：computed的响应性：初见调度器，处理脏的状.mp4 [58.7 MB]
7-7总结：computed计算属性.mp4 [8.0 MB]
7-12问题分析：watch下的依赖收集原则.mp4 [30.6 MB]
7-8源码阅读：响应性的数据监听器watch，跟踪源码实现逻辑(.mp4 [119.7 MB]

第12章runtime运行时-diff算法核心实现17 集

12-1前言.mp4 [21.6 MB]
12-13源码逻辑：场景五：求解最长递增子序列.mp4 [202.7 MB]
12-14源码阅读：场景五：乱序下的diff比对.mp4 [129.3 MB]
12-17总结.mp4 [33.1 MB]
12-12前置知识：场景五：最长递增子序列.mp4 [70.6 MB]
12-2前置知识：VNode虚拟节点key属性的作用.mp4 [26.7 MB]
12-9源码阅读：场景四：旧节点多于新节点时的diff比对.mp4 [23.2 MB]
12-8框架实现：场景三：新节点多余旧节点时的diff比对.mp4 [16.5 MB]
12-15源码阅读：场景五：乱序下的diff比对.mp4 [177.9 MB]
12-10框架实现：场景四：旧节点多于新节点时的diff比对.mp4 [8.7 MB]
12-11局部总结：前四种diff场景的总结与乱序场景.mp4 [35.6 MB]
12-7源码阅读：场景三：新节点多余旧节点时的diff比对.mp4 [71.1 MB]
12-3源码阅读：场景一：自前向后的diff对比.mp4 [87.6 MB]
12-5源码阅读：场景二：自后向前的diff对比.mp4 [41.3 MB]
12-4框架实现：场景一：自前向后的diff对比.mp4 [44.4 MB]
12-16框架实现：场景五：乱序下的diff比对.mp4 [39.5 MB]
12-6框架实现：场景二：自后向前的diff对比.mp4 [16.2 MB]

第04章响应系统-响应系统的核心设计原则5 集

4-3如何让你的程序变得更加“聪明”？.mp4 [33.4 MB]
4-4vue2的响应性核心API：Object.definePr.mp4 [49.0 MB]
4-6vue3的响应性核心API：proxy.mp4 [90.3 MB]
4-7proxy的最佳拍档：Reflect—拦截js.mp4 [93.1 MB]
4-5Object.defineProperty在设计层的缺陷.mp4 [55.3 MB]

第10章runtime运行时-构建renderer渲染器26 集

10-6源码阅读：渲染更新，ELEMENT节点的更新操作.mp4 [7.9 MB]
10-1前言.mp4 [14.6 MB]
10-8源码阅读：新旧节点不同元素时，ELEMENT节点的更新操.mp4 [44.0 MB]
10-21框架实现：renderer渲染器下，Text节点的挂载.mp4 [30.6 MB]
10-11源码阅读：class属性和其他属性的区分挂载.mp4 [86.0 MB]
10-24源码阅读：renderer渲染器下，Fragment节.mp4 [44.1 MB]
10-2源码阅读：初见render函数，ELEMENT节点的挂载.mp4 [130.7 MB]
10-4框架实现：基于renderer完成ELEMENT节点挂载.mp4 [49.0 MB]
10-17深入事件更新：vueeventinvokers.mp4 [57.4 MB]
10-9框架实现：处理新旧节点不同元素时，ELEMENT节点的更.mp4 [30.4 MB]
10-5框架实现：合并渲染架构，得到可用的render函数.mp4 [54.5 MB]
10-20源码阅读：renderer渲染器下，Text节点的挂载.mp4 [40.2 MB]
10-19局部总结：ELEMENT节点的挂载、更新、props打.mp4 [10.2 MB]
10-18框架实现：ELEMENT节点下，事件的挂载和更新.mp4 [38.8 MB]
10-25框架实现：renderer渲染器下，Fragment节.mp4 [46.7 MB]
10-16源码阅读：ELEMENT节点下，事件的挂载和更新.mp4 [128.0 MB]
10-7框架实现：渲染更新，ELEMENT节点的更新实现.mp4 [103.2 MB]
10-15框架实现：ELEMENT节点下，style属性的挂载和.mp4 [35.7 MB]
10-3框架实现：构建renderer基本架构.mp4 [98.4 MB]
10-12深入属性挂载：HTMLAttributes和DOMPr.mp4 [72.0 MB]
10-22源码阅读：renderer渲染器下，Comment节点.mp4 [16.7 MB]
10-10框架实现：删除元素，ELEMENT节点的卸载操作.mp4 [18.7 MB]
10-14源码阅读：ELEMENT节点下，style属性的挂载和.mp4 [75.1 MB]
10-26总结.mp4 [18.2 MB]
10-23框架实现：renderer渲染器下，Comment节点.mp4 [18.6 MB]
10-13框架实现：区分处理ELEMENT节点的各种属性挂载.mp4 [32.4 MB]

第01章课程导读1 集

1-1课程导读.mp4 [50.3 MB]

第06章响应系统-ref的响应性7 集

6-4框架实现：ref函数-构建复杂数据类型的响应性.mp4 [67.4 MB]
6-2源码阅读：ref复杂数据类型的响应性(1).mp4 [93.5 MB]
6-5总结：ref复杂数据类型的响应性.mp4 [12.1 MB]
6-3源码阅读：ref复杂数据类型的响应性(2).mp4 [76.6 MB]
6-7框架实现：ref函数-构建简单数据类型的响应性.mp4 [32.3 MB]
6-6源码阅读：ref简单数据类型的响应性.mp4 [65.5 MB]
6-8总结：ref简单数据类型响应性.mp4 [16.2 MB]

第05章响应系统-初见reactivity模块14 集

5-13功能升级：响应数据对应多个effect.mp4 [29.0 MB]
5-9框架实现：track&&trigger.mp4 [34.9 MB]
5-2源码阅读：reactive的响应性，跟踪Vue3源码实现逻.mp4 [128.7 MB]
5-7热更新的开发时：提升开发体验.mp4 [18.4 MB]
5-5框架实现：什么是WeakMap？它和Map有什么区别？.mp4 [58.0 MB]
5-15reactive函数的局限性.mp4 [33.1 MB]
5-4框架实现：构建reactive函数，获取proxy实例.mp4 [75.3 MB]
5-3源码阅读：reactive的响应性，跟踪Vue3源码实现逻.mp4 [99.2 MB]
5-12总结：单一依赖的reactive.mp4 [23.9 MB]
5-8框架实现：构建effect函数，生成ReactiveEff.mp4 [40.4 MB]
5-14框架实现：构建Dep模块，处理一对多的依赖关系.mp4 [51.9 MB]
5-6框架实现：createGetter&&cr.mp4 [54.4 MB]
5-10框架实现：构建track依赖收集函数.mp4 [34.6 MB]
5-11 框架实现：构建 trigger 触发依赖.mp4 [23.0 MB]

第14章compiler编译器-构建compile编译器18 集

14-5框架实现：构建parse方法，生成context实例.mp4 [47.2 MB]
14-4源码阅读：编译器第一步：依据模板，生成AST抽象语法树.mp4 [269.6 MB]
14-15框架实现：构建CodegenContext上下文对象.mp4 [31.5 MB]
14-9源码阅读：编译器第二步：转化AST，得到JavaScri.mp4 [215.0 MB]
14-7框架实现：生成AST，构建测试.mp4 [30.5 MB]
14-13扩展知识：render函数的生成方案.mp4 [58.2 MB]
14-16框架实现：解析JavaScriptAST，拼接rend.mp4 [158.6 MB]
14-10框架实现：转化JavaScriptAST，构建深度优先.mp4 [111.7 MB]
14-6框架实现：构建有限自动状态机解析模板，扫描token生成.mp4 [218.5 MB]
14-1前言.mp4 [9.2 MB]
14-17框架实现：新建compat模块，把render转化为f.mp4 [26.2 MB]
14-14源码阅读：编译器第三步：生成render函数.mp4 [154.6 MB]
14-2扩展知识：JavaScript与有限自动状态机.mp4 [79.4 MB]
14-18总结.mp4 [12.3 MB]
14-11框架实现：构建transformXXX方法，转化对应节.mp4 [121.8 MB]
14-12框架实现：处理根节点的转化，生成JavaScriptA.mp4 [52.8 MB]
14-8扩展知识：AST到JavaScriptAST的转化策略和.mp4 [40.9 MB]
14-3扩展知识：扫描tokens构建AST结构的方案.mp4 [43.4 MB]

第11章runtime运行时-组件的设计原理与渲染方案17 集

11-2源码阅读：无状态基础组件挂载逻辑.mp4 [101.1 MB]
11-7源码阅读：有状态的响应性组件挂载逻辑.mp4 [96.2 MB]
11-9源码阅读：组件生命周期回调处理逻辑.mp4 [115.5 MB]
11-11源码阅读：生命回调钩子中访问响应性数据.mp4 [44.1 MB]
11-8框架实现：有状态的响应性组件挂载逻辑.mp4 [19.8 MB]
11-5源码阅读：无状态基础组件更新逻辑.mp4 [40.9 MB]
11-1前言.mp4 [12.8 MB]
11-16框架实现：compositionAPI，setup函数.mp4 [29.8 MB]
11-17总结.mp4 [18.0 MB]
11-14框架实现：响应性数据改变，触发组件的响应性变化.mp4 [21.4 MB]
11-10框架实现：组件生命周期回调处理逻辑.mp4 [45.7 MB]
11-13源码阅读：响应性数据改变，触发组件的响应性变化.mp4 [62.9 MB]
11-3源码阅读：无状态基础组件挂载逻辑.mp4 [78.6 MB]
11-4框架实现：完成无状态基础组件的挂载逻辑.mp4 [76.4 MB]
11-15源码阅读：compositionAPI，setup函数.mp4 [66.4 MB]
11-12框架实现：生命回调钩子中访问响应性数据.mp4 [13.3 MB]
11-6局部总结：无状态组件的挂载、更新、卸载总结.mp4 [12.7 MB]

第09章runtime运行时-构建h函数，生成Vnode11 集

9-7源码阅读：h函数，组件的本质与对应的VNode.mp4 [62.1 MB]
9-10框架实现：实现剩余场景Text、Comment、Frag.mp4 [18.4 MB]
9-12框架实现：完成虚拟节点下的class和style的增强.mp4 [33.0 MB]
9-3阅读源码：初见h函数，跟踪Vue3源码实现基础逻辑(2).mp4 [92.1 MB]
9-5源码阅读：h函数，跟踪ELEMENT+ARRAY_CHIL.mp4 [73.4 MB]
9-9源码阅读：h函数，跟踪Text、Comment、Fragm.mp4 [49.1 MB]
9-2阅读源码：初见h函数，跟踪Vue3源码实现基础逻辑(1).mp4 [64.7 MB]
9-11源码阅读：对class和style的增强处理.mp4 [51.3 MB]
9-8框架实现：处理组件的VNode.mp4 [35.5 MB]
9-4框架实现：构建h函数，处理ELEMENT+TEXT_CHI.mp4 [112.2 MB]
9-6框架实现：构建h函数，处理ELEMENT+ARRAY_CH.mp4 [26.5 MB]

第08章runtime运行时-运行时核心设计原则2 集

8-5运行时核心设计原则.mp4 [63.1 MB]
8-2HTMLDOM节点树与虚拟DOM树.mp4 [59.2 MB]

第17章课程总结1 集

17-1总结.mp4 [11.3 MB]

第03章Vue3源码结构-搭建框架雏形1 条