Vue3源码解析,打造自己的Vue3框架,领悟尤大思维精髓 [完结]
上次更新时间:2024-11-12
课程售价: 2.9 元
联系右侧微信客服充值或购买课程
课程内容
{1}-第1章 课程导读
{2}-第2章 框架设计前瞻 - 框架设计中的一些基本概念
{3}-第3章 Vue 3源码结构 - 搭建框架雏形
{4}-第4章 响应系统 - 响应系统的核心设计原则
{5}-第5章 响应系统 - 初见 reactivity 模块
- 5-1前言0155
- 5-2源码阅读reactive的响应性跟踪Vue3源码实现逻辑12125
- 5-3源码阅读reactive的响应性跟踪Vue3源码实现逻辑21703
- 5-4框架实现构建reactive函数获取proxy实例1257
- 5-5框架实现什么是WeakMap它和Map有什么区别0919
- 5-6框架实现createGettercreateSetter0933
- 5-7热更新的开发时提升开发体验0314
- 5-8框架实现构建effect函数生成ReactiveEffect实例0702
- 5-9框架实现tracktrigger0557
- 5-10框架实现构建track依赖收集函数0538
- 5-11框架实现构建trigger触发依赖0347
- 5-12总结单一依赖的reactive0356
- 5-13功能升级响应数据对应多个effect0438
- 5-14框架实现构建Dep模块处理一对多的依赖关系0818
- 5-15reactive函数的局限性0510
- 5-16总结0126
{6}-第6章 响应系统 - ref 的响应性
{7}-第7章 响应系统 - watch && computed
- 7-1开篇0104
- 7-2源码阅读computed的响应性跟踪Vue3源码实现逻辑11553
- 7-3源码阅读computed的响应性跟踪Vue3源码实现逻辑21636
- 7-4框架实现构建ComputedRefImpl读取计算属性的值1032
- 7-5框架实现computed的响应性初见调度器处理脏的状态1021
- 7-6框架实现computed的缓存性2423
- 7-7总结computed计算属性0118
- 7-8源码阅读响应性的数据监听器watch跟踪源码实现逻辑11940
- 7-9源码阅读响应性的数据监听器watch跟踪源码实现逻辑21713
- 7-10框架实现深入scheduler调度系统实现机制2526
- 7-11框架实现初步实现watch数据监听器1857
- 7-12问题分析watch下的依赖收集原则0524
- 7-13框架实现完成watch数据监听器的依赖收集0331
- 7-14总结watch数据侦听器0152
- 7-15总结0207
{8}--第8章runtime运行时-运行时核心设计原则
{9}--第9章runtime运行时-构建h函数,生成Vnode
- [9.1]--9-1前言(
- [9.2]--9-2阅读源码:初见h函数,跟踪Vue3源码实现基础逻辑(1)(
- [9.4]--9-4框架实现:构建h函数,处理ELEMENT+TEXT_CHI(
- [9.5]--9-5源码阅读:h函数,跟踪ELEMENT+ARRAY_CHIL(
- [9.6]--9-6框架实现:构建h函数,处理ELEMENT+ARRAY_CH(
- [9.7]--9-7源码阅读:h函数,组件的本质与对应的VNode(
- [9.8]--9-8框架实现:处理组件的VNode(
- [9.9]--9-9源码阅读:h函数,跟踪Text、Comment、Fragm(
- [9.10]--9-10框架实现:实现剩余场景Text、Comment、Frag(
- [9.11]--9-11源码阅读:对class和style的增强处理(
- [9.12]--9-12框架实现:完成虚拟节点下的class和style的增强(
- [9.13]--9-13总结(
{10}--第10章runtime运行时-构建renderer渲染器
- [10.1]--10-1前言(
- [10.2]--10-2源码阅读:初见render函数,ELEMENT节点的挂载(
- [10.3]--10-3框架实现:构建renderer基本架构(
- [10.4]--10-4框架实现:基于renderer完成ELEMENT节点挂载(
- [10.5]--10-5框架实现:合并渲染架构,得到可用的render函数(
- [10.7]--10-7框架实现:渲染更新,ELEMENT节点的更新实现(
- [10.8]--10-8源码阅读:新旧节点不同元素时,ELEMENT节点的更新操(
- [10.9]--10-9框架实现:处理新旧节点不同元素时,ELEMENT节点的更(
- [10.10]--10-10框架实现:删除元素,ELEMENT节点的卸载操作(
- [10.11]--10-11源码阅读:class属性和其他属性的区分挂载(
- [10.12]--10-12深入属性挂载:HTMLAttributes和DOMPr(
- [10.13]--10-13框架实现:区分处理ELEMENT节点的各种属性挂载(
- [10.14]--10-14源码阅读:ELEMENT节点下,style属性的挂载和(
- [10.15]--10-15框架实现:ELEMENT节点下,style属性的挂载和(
- [10.16]--10-16源码阅读:ELEMENT节点下,事件的挂载和更新(
- [10.17]--10-17深入事件更新:vueeventinvokers(
- [10.18]--10-18框架实现:ELEMENT节点下,事件的挂载和更新(
- [10.19]--10-19局部总结:ELEMENT节点的挂载、更新、props打(
- [10.20]--10-20源码阅读:renderer渲染器下,Text节点的挂载(
- [10.21]--10-21框架实现:renderer渲染器下,Text节点的挂载(
- [10.22]--10-22源码阅读:renderer渲染器下,Comment节点(
- [10.23]--10-23框架实现:renderer渲染器下,Comment节点(
- [10.24]--10-24源码阅读:renderer渲染器下,Fragment节(
- [10.25]--10-25框架实现:renderer渲染器下,Fragment节(
- [10.26]--10-26总结(
{11}--第11章runtime运行时-组件的设计原理与渲染方案
- [11.2]--11-2源码阅读:无状态基础组件挂载逻辑(
- [11.3]--11-3源码阅读:无状态基础组件挂载逻辑(
- [11.4]--11-4框架实现:完成无状态基础组件的挂载逻辑(
- [11.5]--11-5源码阅读:无状态基础组件更新逻辑(
- [11.6]--11-6局部总结:无状态组件的挂载、更新、卸载总结(
- [11.7]--11-7源码阅读:有状态的响应性组件挂载逻辑(
- [11.8]--11-8框架实现:有状态的响应性组件挂载逻辑(
- [11.10]--11-10框架实现:组件生命周期回调处理逻辑(
- [11.11]--11-11源码阅读:生命回调钩子中访问响应性数据(
- [11.12]--11-12框架实现:生命回调钩子中访问响应性数据(
- [11.13]--11-13源码阅读:响应性数据改变,触发组件的响应性变化(
- [11.14]--11-14框架实现:响应性数据改变,触发组件的响应性变化(
- [11.15]--11-15源码阅读:compositionAPI,setup函数(
- [11.16]--11-16框架实现:compositionAPI,setup函数(
- [11.17]--11-17总结(
{12}--第12章runtime运行时-diff算法核心实现
- [12.1]--12-1前言(
- [12.2]--12-2前置知识:VNode虚拟节点key属性的作用(
- [12.3]--12-3源码阅读:场景一:自前向后的diff对比(
- [12.4]--12-4框架实现:场景一:自前向后的diff对比(
- [12.5]--12-5源码阅读:场景二:自后向前的diff对比(
- [12.6]--12-6框架实现:场景二:自后向前的diff对比(
- [12.7]--12-7源码阅读:场景三:新节点多余旧节点时的diff比对(
- [12.8]--12-8框架实现:场景三:新节点多余旧节点时的diff比对(
- [12.9]--12-9源码阅读:场景四:旧节点多于新节点时的diff比对(
- [12.10]--12-10框架实现:场景四:旧节点多于新节点时的diff比对(
- [12.11]--12-11局部总结:前四种diff场景的总结与乱序场景(
- [12.12]--12-12前置知识:场景五:最长递增子序列(
- [12.13]--12-13源码逻辑:场景五:求解最长递增子序列(
- [12.14]--12-14源码阅读:场景五:乱序下的diff比对(
- [12.15]--12-15源码阅读:场景五:乱序下的diff比对(
- [12.16]--12-16框架实现:场景五:乱序下的diff比对(
- [12.17]--12-17总结(
{13}--第13章compiler编译器-编译时核心设计原则iclass=
{14}--第14章compiler编译器-构建compile编译器
- [14.1]--14-1前言(
- [14.2]--14-2扩展知识:JavaScript与有限自动状态机(
- [14.3]--14-3扩展知识:扫描tokens构建AST结构的方案(
- [14.4]--14-4源码阅读:编译器第一步:依据模板,生成AST抽象语法树(
- [14.5]--14-5框架实现:构建parse方法,生成context实例(
- [14.6]--14-6框架实现:构建有限自动状态机解析模板,扫描token生成(
- [14.7]--14-7框架实现:生成AST,构建测试(
- [14.8]--14-8扩展知识:AST到JavaScriptAST的转化策略和(
- [14.9]--14-9源码阅读:编译器第二步:转化AST,得到JavaScri(
- [14.10]--14-10框架实现:转化JavaScriptAST,构建深度优先(
- [14.11]--14-11框架实现:构建transformXXX方法,转化对应节(
- [14.12]--14-12框架实现:处理根节点的转化,生成JavaScriptA(
- [14.13]--14-13扩展知识:render函数的生成方案(
- [14.14]--14-14源码阅读:编译器第三步:生成render函数(
- [14.15]--14-15框架实现:构建CodegenContext上下文对象(
- [14.16]--14-16框架实现:解析JavaScriptAST,拼接rend(
- [14.17]--14-17框架实现:新建compat模块,把render转化为f(
- [14.18]--14-18总结(
{15}--第15章compiler编译器-深入编辑器处理逻辑(困难)
- [15.1]--15-1前言(
- [15.2]--15-2响应性数据的编辑器处理:响应性数据的处理逻辑(
- [15.3]--15-3响应性数据的编辑器处理:AST解析逻辑(
- [15.4]--15-4响应性数据的编辑器处理:JavaScriptAST转化逻(
- [15.5]--15-5响应性数据的编辑器处理:render转化逻辑分析(
- [15.6]--15-6响应性数据的编辑器处理:generate生成render(
- [15.7]--15-7响应性数据的编辑器处理:render函数的执行处理(
- [15.8]--15-8多层级模板的编辑器处理:多层级的处理逻辑(
- [15.9]--15-9基于编辑器的指令(v-xx)处理:指令解析的整体逻辑(
- [15.10]--15-10困难-基于编辑器的指令(v-xx)处理:AST解析逻辑(
- [15.11]--15-11困难-基于编辑器的指令(v-xx)处理:JavaScr(
- [15.13]--15-13基于编辑器的指令(v-xx)处理:生成render函数(
- [15.14]--15-14总结(
- 15-12 基于编辑器的指令(v-xx)处理:JavaScript AST ,transform 的转化逻辑(
{16}--第16章运行时+编译时-合并vue处理逻辑
{17}--第17章课程总结
课程内容
17个章节 , 192个讲座
{1}-第1章 课程导读
{2}-第2章 框架设计前瞻 - 框架设计中的一些基本概念
{3}-第3章 Vue 3源码结构 - 搭建框架雏形
{4}-第4章 响应系统 - 响应系统的核心设计原则
{5}-第5章 响应系统 - 初见 reactivity 模块
- 5-1前言0155
- 5-2源码阅读reactive的响应性跟踪Vue3源码实现逻辑12125
- 5-3源码阅读reactive的响应性跟踪Vue3源码实现逻辑21703
- 5-4框架实现构建reactive函数获取proxy实例1257
- 5-5框架实现什么是WeakMap它和Map有什么区别0919
- 5-6框架实现createGettercreateSetter0933
- 5-7热更新的开发时提升开发体验0314
- 5-8框架实现构建effect函数生成ReactiveEffect实例0702
- 5-9框架实现tracktrigger0557
- 5-10框架实现构建track依赖收集函数0538
- 5-11框架实现构建trigger触发依赖0347
- 5-12总结单一依赖的reactive0356
- 5-13功能升级响应数据对应多个effect0438
- 5-14框架实现构建Dep模块处理一对多的依赖关系0818
- 5-15reactive函数的局限性0510
- 5-16总结0126
{6}-第6章 响应系统 - ref 的响应性
{7}-第7章 响应系统 - watch && computed
- 7-1开篇0104
- 7-2源码阅读computed的响应性跟踪Vue3源码实现逻辑11553
- 7-3源码阅读computed的响应性跟踪Vue3源码实现逻辑21636
- 7-4框架实现构建ComputedRefImpl读取计算属性的值1032
- 7-5框架实现computed的响应性初见调度器处理脏的状态1021
- 7-6框架实现computed的缓存性2423
- 7-7总结computed计算属性0118
- 7-8源码阅读响应性的数据监听器watch跟踪源码实现逻辑11940
- 7-9源码阅读响应性的数据监听器watch跟踪源码实现逻辑21713
- 7-10框架实现深入scheduler调度系统实现机制2526
- 7-11框架实现初步实现watch数据监听器1857
- 7-12问题分析watch下的依赖收集原则0524
- 7-13框架实现完成watch数据监听器的依赖收集0331
- 7-14总结watch数据侦听器0152
- 7-15总结0207
{8}--第8章runtime运行时-运行时核心设计原则
{9}--第9章runtime运行时-构建h函数,生成Vnode
- [9.1]--9-1前言(
- [9.2]--9-2阅读源码:初见h函数,跟踪Vue3源码实现基础逻辑(1)(
- [9.4]--9-4框架实现:构建h函数,处理ELEMENT+TEXT_CHI(
- [9.5]--9-5源码阅读:h函数,跟踪ELEMENT+ARRAY_CHIL(
- [9.6]--9-6框架实现:构建h函数,处理ELEMENT+ARRAY_CH(
- [9.7]--9-7源码阅读:h函数,组件的本质与对应的VNode(
- [9.8]--9-8框架实现:处理组件的VNode(
- [9.9]--9-9源码阅读:h函数,跟踪Text、Comment、Fragm(
- [9.10]--9-10框架实现:实现剩余场景Text、Comment、Frag(
- [9.11]--9-11源码阅读:对class和style的增强处理(
- [9.12]--9-12框架实现:完成虚拟节点下的class和style的增强(
- [9.13]--9-13总结(
{10}--第10章runtime运行时-构建renderer渲染器
- [10.1]--10-1前言(
- [10.2]--10-2源码阅读:初见render函数,ELEMENT节点的挂载(
- [10.3]--10-3框架实现:构建renderer基本架构(
- [10.4]--10-4框架实现:基于renderer完成ELEMENT节点挂载(
- [10.5]--10-5框架实现:合并渲染架构,得到可用的render函数(
- [10.7]--10-7框架实现:渲染更新,ELEMENT节点的更新实现(
- [10.8]--10-8源码阅读:新旧节点不同元素时,ELEMENT节点的更新操(
- [10.9]--10-9框架实现:处理新旧节点不同元素时,ELEMENT节点的更(
- [10.10]--10-10框架实现:删除元素,ELEMENT节点的卸载操作(
- [10.11]--10-11源码阅读:class属性和其他属性的区分挂载(
- [10.12]--10-12深入属性挂载:HTMLAttributes和DOMPr(
- [10.13]--10-13框架实现:区分处理ELEMENT节点的各种属性挂载(
- [10.14]--10-14源码阅读:ELEMENT节点下,style属性的挂载和(
- [10.15]--10-15框架实现:ELEMENT节点下,style属性的挂载和(
- [10.16]--10-16源码阅读:ELEMENT节点下,事件的挂载和更新(
- [10.17]--10-17深入事件更新:vueeventinvokers(
- [10.18]--10-18框架实现:ELEMENT节点下,事件的挂载和更新(
- [10.19]--10-19局部总结:ELEMENT节点的挂载、更新、props打(
- [10.20]--10-20源码阅读:renderer渲染器下,Text节点的挂载(
- [10.21]--10-21框架实现:renderer渲染器下,Text节点的挂载(
- [10.22]--10-22源码阅读:renderer渲染器下,Comment节点(
- [10.23]--10-23框架实现:renderer渲染器下,Comment节点(
- [10.24]--10-24源码阅读:renderer渲染器下,Fragment节(
- [10.25]--10-25框架实现:renderer渲染器下,Fragment节(
- [10.26]--10-26总结(
{11}--第11章runtime运行时-组件的设计原理与渲染方案
- [11.2]--11-2源码阅读:无状态基础组件挂载逻辑(
- [11.3]--11-3源码阅读:无状态基础组件挂载逻辑(
- [11.4]--11-4框架实现:完成无状态基础组件的挂载逻辑(
- [11.5]--11-5源码阅读:无状态基础组件更新逻辑(
- [11.6]--11-6局部总结:无状态组件的挂载、更新、卸载总结(
- [11.7]--11-7源码阅读:有状态的响应性组件挂载逻辑(
- [11.8]--11-8框架实现:有状态的响应性组件挂载逻辑(
- [11.10]--11-10框架实现:组件生命周期回调处理逻辑(
- [11.11]--11-11源码阅读:生命回调钩子中访问响应性数据(
- [11.12]--11-12框架实现:生命回调钩子中访问响应性数据(
- [11.13]--11-13源码阅读:响应性数据改变,触发组件的响应性变化(
- [11.14]--11-14框架实现:响应性数据改变,触发组件的响应性变化(
- [11.15]--11-15源码阅读:compositionAPI,setup函数(
- [11.16]--11-16框架实现:compositionAPI,setup函数(
- [11.17]--11-17总结(
{12}--第12章runtime运行时-diff算法核心实现
- [12.1]--12-1前言(
- [12.2]--12-2前置知识:VNode虚拟节点key属性的作用(
- [12.3]--12-3源码阅读:场景一:自前向后的diff对比(
- [12.4]--12-4框架实现:场景一:自前向后的diff对比(
- [12.5]--12-5源码阅读:场景二:自后向前的diff对比(
- [12.6]--12-6框架实现:场景二:自后向前的diff对比(
- [12.7]--12-7源码阅读:场景三:新节点多余旧节点时的diff比对(
- [12.8]--12-8框架实现:场景三:新节点多余旧节点时的diff比对(
- [12.9]--12-9源码阅读:场景四:旧节点多于新节点时的diff比对(
- [12.10]--12-10框架实现:场景四:旧节点多于新节点时的diff比对(
- [12.11]--12-11局部总结:前四种diff场景的总结与乱序场景(
- [12.12]--12-12前置知识:场景五:最长递增子序列(
- [12.13]--12-13源码逻辑:场景五:求解最长递增子序列(
- [12.14]--12-14源码阅读:场景五:乱序下的diff比对(
- [12.15]--12-15源码阅读:场景五:乱序下的diff比对(
- [12.16]--12-16框架实现:场景五:乱序下的diff比对(
- [12.17]--12-17总结(
{13}--第13章compiler编译器-编译时核心设计原则iclass=
{14}--第14章compiler编译器-构建compile编译器
- [14.1]--14-1前言(
- [14.2]--14-2扩展知识:JavaScript与有限自动状态机(
- [14.3]--14-3扩展知识:扫描tokens构建AST结构的方案(
- [14.4]--14-4源码阅读:编译器第一步:依据模板,生成AST抽象语法树(
- [14.5]--14-5框架实现:构建parse方法,生成context实例(
- [14.6]--14-6框架实现:构建有限自动状态机解析模板,扫描token生成(
- [14.7]--14-7框架实现:生成AST,构建测试(
- [14.8]--14-8扩展知识:AST到JavaScriptAST的转化策略和(
- [14.9]--14-9源码阅读:编译器第二步:转化AST,得到JavaScri(
- [14.10]--14-10框架实现:转化JavaScriptAST,构建深度优先(
- [14.11]--14-11框架实现:构建transformXXX方法,转化对应节(
- [14.12]--14-12框架实现:处理根节点的转化,生成JavaScriptA(
- [14.13]--14-13扩展知识:render函数的生成方案(
- [14.14]--14-14源码阅读:编译器第三步:生成render函数(
- [14.15]--14-15框架实现:构建CodegenContext上下文对象(
- [14.16]--14-16框架实现:解析JavaScriptAST,拼接rend(
- [14.17]--14-17框架实现:新建compat模块,把render转化为f(
- [14.18]--14-18总结(
{15}--第15章compiler编译器-深入编辑器处理逻辑(困难)
- [15.1]--15-1前言(
- [15.2]--15-2响应性数据的编辑器处理:响应性数据的处理逻辑(
- [15.3]--15-3响应性数据的编辑器处理:AST解析逻辑(
- [15.4]--15-4响应性数据的编辑器处理:JavaScriptAST转化逻(
- [15.5]--15-5响应性数据的编辑器处理:render转化逻辑分析(
- [15.6]--15-6响应性数据的编辑器处理:generate生成render(
- [15.7]--15-7响应性数据的编辑器处理:render函数的执行处理(
- [15.8]--15-8多层级模板的编辑器处理:多层级的处理逻辑(
- [15.9]--15-9基于编辑器的指令(v-xx)处理:指令解析的整体逻辑(
- [15.10]--15-10困难-基于编辑器的指令(v-xx)处理:AST解析逻辑(
- [15.11]--15-11困难-基于编辑器的指令(v-xx)处理:JavaScr(
- [15.13]--15-13基于编辑器的指令(v-xx)处理:生成render函数(
- [15.14]--15-14总结(
- 15-12 基于编辑器的指令(v-xx)处理:JavaScript AST ,transform 的转化逻辑(