Vue3源码解析,打造自己的Vue3框架

Vue3源码解析,打造自己的Vue3框架-知识充电站
Vue3源码解析,打造自己的Vue3框架
此内容为付费阅读,请付费后查看
10积分
付费阅读

部分资源需使用积分获取,注册就送积分,论坛互动、签到途径轻松获取。

部分图片较大,加载较慢,PC端浏览最佳!



image

  • 第1章 课程导读 试看1 节 | 10分钟

    明确课程的核心:这是一个让《初级软件开发工程师都能够学会》同时可以让《高级软件工程师也能收获颇多,更进一步》的源码课

    收起列表

    • 视频:1-1 课程导读 (09:39)试看
  •  
  • 第2章 框架设计前瞻 – 框架设计中的一些基本概念14 节 | 96分钟

    本章节主要需要介绍框架设计中的基本概念,因为对于很多开发者而言,平时工作中,更多的是针对应用进行开发,对框架本身的设计接触比较少,所以我们需要在一开始的时候,进行一个科普。

    收起列表

    • 视频:2-1 前言 (01:54)
    • 视频:2-2 编程范式之命令式编程 (06:19)
    • 视频:2-3 编程范式之声明式编程 (04:27)
    • 视频:2-4 命令式 VS 声明式 (07:21)
    • 视频:2-5 企业应用的开发与设计原则 (06:56)
    • 视频:2-6 为什么说框架的设计过程其实是一个不断取舍的过程? (05:49)
    • 视频:2-7 .vue 中的 html 是真实的 html 吗? (04:56)
    • 视频:2-8 什么是运行时? (17:16)
    • 视频:2-9 什么是编译时? (07:44)
    • 视频:2-10 运行时 + 编译时 (16:19)
    • 视频:2-11 什么是副作用 (04:07)
    • 视频:2-12 Vue 3 框架设计概述 (04:47)
    • 视频:2-13 扩展:所谓良好的 `TypeScript` 支持,是如何提供的? (06:11)
    • 视频:2-14 总结 (01:04)
  •  
  • 第3章 Vue 3源码结构 – 搭建框架雏形12 节 | 84分钟

    主要讲解Vue 3 源码如何进行 debugger、源码的各个模块是如何进行划分与配合工作的、Vue 3 的代码框架设计有什么独特之处。

    收起列表

    • 视频:3-1 前言 (01:27)
    • 视频:3-2 探索源码设计:Vue3 源码设计大解析 (11:45)
    • 视频:3-3 创建测试实例:在 Vue 源码中运行测试实例 (09:01)
    • 视频:3-4 跟踪解析运行行为:为 vue 开启 SourceMap (09:06)试看
    • 视频:3-5 授人以鱼:如何针对源码进行 debugger (05:06)
    • 视频:3-6 授人以渔:如何阅读源码 (07:24)
    • 视频:3-7 开始搭建自己的框架:创建 vue-next-mini (06:02)
    • 视频:3-8 为框架进行配置:导入 ts (07:44)
    • 视频:3-9 引入代码格式化工具:prettier 让你的代码结构更加规范 (06:10)
    • 视频:3-10 模块打包器:rollup (12:38)
    • 视频:3-11 初见框架雏形:配置路径映射 (05:16)
    • 视频:3-12 总结 (01:27)
  •  
  • 第4章 响应系统 – 响应系统的核心设计原则8 节 | 61分钟

    从 vue 2 到 vue 3,从 Object.defineProperty 到 Proxy 。这样的升级带来了什么样的变化,Object.defineProperty 又存在哪些设计层的缺陷呢?本章统统告诉你

    收起列表

    • 视频:4-1 前言 (01:50)
    • 视频:4-2 JS 的程序性 (04:35)
    • 视频:4-3 如何让你的程序变得更加“聪明”? (05:24)
    • 视频:4-4 vue 2 的响应性核心 API:Object.defineProperty (08:19)
    • 视频:4-5 Object.defineProperty 在设计层的缺陷 (08:59)试看
    • 视频:4-6 vue3的响应性核心 API:proxy (14:20)
    • 视频:4-7 proxy的最佳拍档:Reflect—拦截 js 对象操作 (15:13)
    • 视频:4-8 总结 (01:51)
  •  
  • 第5章 响应系统 – 初见 reactivity 模块16 节 | 122分钟

    reactive 函数是响应性的核心函数之一。本章将讲解 reactive 函数是如何构建响应性的、vue 3对它的处理是什么、我们又应该如何实现它。

    收起列表

    • 视频:5-1 前言 (01:55)
    • 视频:5-2 源码阅读:reactive 的响应性,跟踪 Vue 3 源码实现逻辑(1) (21:25)
    • 视频:5-3 源码阅读:reactive 的响应性,跟踪 Vue 3 源码实现逻辑(2) (17:03)
    • 视频:5-4 框架实现:构建 reactive 函数,获取 proxy 实例 (12:57)
    • 视频:5-5 框架实现:什么是 WeakMap?它和 Map 有什么区别? (09:19)
    • 视频:5-6 框架实现:createGetter && createSetter (09:33)
    • 视频:5-7 热更新的开发时:提升开发体验 (03:14)
    • 视频:5-8 框架实现:构建 effect 函数,生成 ReactiveEffect 实例 (07:02)
    • 视频:5-9 框架实现:track && trigger (05:57)
    • 视频:5-10 框架实现:构建 track 依赖收集函数 (05:38)
    • 视频:5-11 框架实现:构建 trigger 触发依赖 (03:47)
    • 视频:5-12 总结:单一依赖的 reactive (03:56)
    • 视频:5-13 功能升级:响应数据对应多个 effect (04:38)
    • 视频:5-14 框架实现:构建 Dep 模块,处理一对多的依赖关系 (08:18)
    • 视频:5-15 reactive 函数的局限性 (05:10)
    • 视频:5-16 总结 (01:26)
  •  
  • 第6章 响应系统 – ref 的响应性9 节 | 65分钟

    reactive 函数存在一定的不足。那么,本章将讲解ref 函数是如何弥补的这种不足的、为什么 ref 必须要通过 .value 获取数据、为什么 ref 解构之后不会失去响应性、Ref 和 reactive 之间又存在什么关系。

    收起列表

    • 视频:6-1 前言 (01:06)
    • 视频:6-2 源码阅读:ref 复杂数据类型的响应性(1) (15:30)
    • 视频:6-3 源码阅读:ref 复杂数据类型的响应性(2) (12:52)
    • 视频:6-4 框架实现:ref 函数 – 构建复杂数据类型的响应性 (10:59)
    • 视频:6-5 总结:ref 复杂数据类型的响应性 (01:48)
    • 视频:6-6 源码阅读:ref 简单数据类型的响应性 (11:11)
    • 视频:6-7 框架实现:ref 函数 – 构建简单数据类型的响应性 (05:39)
    • 视频:6-8 总结:ref 简单数据类型响应性 (02:45)
    • 视频:6-9 总结 (02:49)
  •  
  • 第7章 响应系统 – watch && computed15 节 | 175分钟

    响应性的变化总是及时的?那么是否存在惰性的响应性呢? Vue 中所谓的调度系统又是什么意思?Watch 和 computed 在源码层存在什么样的区别?它们有和 reactive 存在什么差异呢?

    收起列表

    • 视频:7-1 开篇 (01:04)
    • 视频:7-2 源码阅读:computed 的响应性,跟踪 Vue 3 源码实现逻辑(1) (15:53)
    • 视频:7-3 源码阅读:computed 的响应性,跟踪 Vue 3 源码实现逻辑(2) (16:36)
    • 视频:7-4 框架实现:构建 ComputedRefImpl ,读取计算属性的值 (10:32)
    • 视频:7-5 框架实现:computed 的响应性:初见调度器,处理脏的状态 (10:21)
    • 视频:7-6 框架实现:computed 的缓存性 (24:23)
    • 视频:7-7 总结:computed 计算属性 (01:18)
    • 视频:7-8 源码阅读:响应性的数据监听器 watch,跟踪源码实现逻辑(1) (19:40)
    • 视频:7-9 源码阅读:响应性的数据监听器 watch,跟踪源码实现逻辑(2) (17:13)
    • 视频:7-10 框架实现:深入 scheduler 调度系统实现机制 (25:26)
    • 视频:7-11 框架实现:初步实现 watch 数据监听器 (18:57)
    • 视频:7-12 问题分析:watch 下的依赖收集原则 (05:24)
    • 视频:7-13 框架实现:完成 watch 数据监听器的依赖收集 (03:31)
    • 视频:7-14 总结:watch 数据侦听器 (01:52)
    • 视频:7-15 总结 (02:07)
  •  
  • 第8章 runtime 运行时 – 运行时核心设计原则6 节 | 43分钟

    在构建运行时之前,我们需要了解的基础概念,比如:DOM 树和虚拟 DOM 树的关系,render 函数和 h 函数的关系,运行时的核心设计原则…

    收起列表

    • 视频:8-1 前言 (02:47)
    • 视频:8-2 HTML DOM 节点树与虚拟 DOM 树 (09:56)
    • 视频:8-3 挂载与更新 (12:35)
    • 视频:8-4 h 函数 与 render 函数 (05:29)
    • 视频:8-5 运行时核心设计原则 (10:36)
    • 视频:8-6 总结 (00:40)
  •  
  • 第9章 runtime 运行时 – 构建 h 函数,生成 Vnode13 节 | 108分钟

    h 函数作为运行时的核心函数,我们应该如何进行构建。Vnode 中对 Element、component、Text、Comment、Fragment 又如何进行划分?

    收起列表

    • 视频:9-1 前言 (01:44)
    • 视频:9-2 阅读源码:初见 h 函数,跟踪 Vue 3 源码实现基础逻辑(1) (10:39)
    • 视频:9-3 阅读源码:初见 h 函数,跟踪 Vue 3 源码实现基础逻辑(2) (14:57)
    • 视频:9-4 框架实现:构建 h 函数,处理 ELEMENT + TEXT_CHILDREN 场景 (19:27)
    • 视频:9-5 源码阅读:h 函数,跟踪 ELEMENT + ARRAY_CHILDREN 场景下的源码实现 (12:22)
    • 视频:9-6 框架实现:构建 h 函数,处理 ELEMENT + ARRAY_CHILDREN 场景 (04:24)
    • 视频:9-7 源码阅读:h 函数,组件的本质与对应的 VNode (10:32)
    • 视频:9-8 框架实现:处理组件的 VNode (06:03)
    • 视频:9-9 源码阅读:h 函数,跟踪 Text 、 Comment、Fragment 场景 (07:54)
    • 视频:9-10 框架实现:实现剩余场景 Text 、 Comment、Fragment (03:17)
    • 视频:9-11 源码阅读:对 class 和 style 的增强处理 (08:19)
    • 视频:9-12 框架实现:完成虚拟节点下的 class 和 style 的增强 (05:56)
    • 视频:9-13 总结 (02:11)
  •  
  • 第10章 runtime 运行时 – 构建 renderer 渲染器26 节 | 232分钟

    渲染器是运行时最核心的内容,针对不同的 Vnode 渲染器如何进行处理。在浏览器端和 SSR 端这些不同的宿主环境下, 节点的挂载又是如何进行呢?

    收起列表

    • 视频:10-1 前言 (02:36)
    • 视频:10-2 源码阅读:初见 render 函数,ELEMENT 节点的挂载操作 (20:54)
    • 视频:10-3 框架实现:构建 renderer 基本架构 (17:26)
    • 视频:10-4 框架实现:基于 renderer 完成 ELEMENT 节点挂载 (08:09)
    • 视频:10-5 框架实现:合并渲染架构,得到可用的 render 函数 (09:31)
    • 视频:10-6 源码阅读:渲染更新,ELEMENT 节点的更新操作 (11:51)
    • 视频:10-7 框架实现:渲染更新,ELEMENT 节点的更新实现 (17:55)
    • 视频:10-8 源码阅读:新旧节点不同元素时,ELEMENT 节点的更新操作 (07:32)
    • 视频:10-9 框架实现:处理新旧节点不同元素时,ELEMENT 节点的更新操作 (05:01)
    • 视频:10-10 框架实现:删除元素,ELEMENT 节点的卸载操作 (03:18)
    • 视频:10-11 源码阅读:class 属性和其他属性的区分挂载 (15:31)
    • 视频:10-12 深入属性挂载:HTML Attributes 和 DOM Properties (12:25)
    • 视频:10-13 框架实现:区分处理 ELEMENT 节点的各种属性挂载 (05:20)
    • 视频:10-14 源码阅读:ELEMENT 节点下, style 属性的挂载和更新 (12:08)
    • 视频:10-15 框架实现:ELEMENT 节点下, style 属性的挂载和更新 (05:47)
    • 视频:10-16 源码阅读:ELEMENT 节点下,事件的挂载和更新 (21:07)
    • 视频:10-17 深入事件更新:vue event invokers (09:41)
    • 视频:10-18 框架实现:ELEMENT 节点下,事件的挂载和更新 (06:37)
    • 视频:10-19 局部总结:ELEMENT 节点的挂载、更新、props 打补丁等行为总结 (01:46)
    • 视频:10-20 源码阅读:renderer 渲染器下,Text 节点的挂载、更新行为 (06:57)
    • 视频:10-21 框架实现:renderer 渲染器下,Text 节点的挂载、更新行为 (05:24)
    • 视频:10-22 源码阅读:renderer 渲染器下,Comment 节点的挂载行为 (02:42)
    • 视频:10-23 框架实现:renderer 渲染器下,Comment 节点的挂载行为 (03:22)
    • 视频:10-24 源码阅读:renderer渲染器下, Fragment 节点的挂载、更新行为 (07:28)
    • 视频:10-25 框架实现:renderer渲染器下, Fragment 节点的挂载、更新行为 (07:48)
    • 视频:10-26 总结 (02:52)
  •  
  • 第11章 runtime 运行时 – 组件的设计原理与渲染方案17 节 | 145分钟

    组件是 vue 中非常重要的一块内容,值得我们花费一个单独的模块进行讲解。对组件而言,他不光包含了 render 的渲染函数,它还额外包含了 data 响应性数据、生命周期钩子等内容,针对于这么复杂的场景,vue 是如何进行设计的?我们又应该如何处理呢?这些都会在本章进行讲解…

    收起列表

    • 视频:11-1 前言 (02:04)
    • 视频:11-2 源码阅读:无状态基础组件挂载逻辑 (16:57)
    • 视频:11-3 源码阅读:无状态基础组件挂载逻辑 (13:20)
    • 视频:11-4 框架实现:完成无状态基础组件的挂载逻辑 (12:43)
    • 视频:11-5 源码阅读:无状态基础组件更新逻辑 (06:57)
    • 视频:11-6 局部总结:无状态组件的挂载、更新、卸载总结 (02:03)
    • 视频:11-7 源码阅读:有状态的响应性组件挂载逻辑 (16:19)
    • 视频:11-8 框架实现:有状态的响应性组件挂载逻辑 (03:25)
    • 视频:11-9 源码阅读:组件生命周期回调处理逻辑 (19:45)
    • 视频:11-10 框架实现:组件生命周期回调处理逻辑 (08:06)
    • 视频:11-11 源码阅读:生命回调钩子中访问响应性数据 (07:27)
    • 视频:11-12 框架实现:生命回调钩子中访问响应性数据 (02:19)
    • 视频:11-13 源码阅读:响应性数据改变,触发组件的响应性变化 (10:22)
    • 视频:11-14 框架实现:响应性数据改变,触发组件的响应性变化 (03:35)
    • 视频:11-15 源码阅读:composition API ,setup 函数挂载逻辑 (11:27)
    • 视频:11-16 框架实现:composition API ,setup 函数挂载逻辑 (05:12)
    • 视频:11-17 总结 (02:47)
  •  
  • 第12章 runtime 运行时 – diff 算法核心实现17 节 | 171分钟

    diff 算法是 渲染器的核心算法,它会在什么场景下进行执行?整个的 diff 逻辑是如何运转的?最长递增子序列指的又是什么?学完本章,以上内容再也难不到你。

    收起列表

    • 视频:12-1 前言 (03:40)
    • 视频:12-2 前置知识:VNode 虚拟节点 key 属性的作用 (04:44)
    • 视频:12-3 源码阅读:场景一:自前向后的 diff 对比 (13:57)
    • 视频:12-4 框架实现:场景一:自前向后的 diff 对比 (07:34)
    • 视频:12-5 源码阅读:场景二:自后向前的 diff 对比 (06:36)
    • 视频:12-6 框架实现:场景二:自后向前的 diff 对比 (03:03)
    • 视频:12-7 源码阅读:场景三:新节点多余旧节点时的 diff 比对 (11:53)
    • 视频:12-8 框架实现:场景三:新节点多余旧节点时的 diff 比对 (03:04)
    • 视频:12-9 源码阅读:场景四:旧节点多于新节点时的 diff 比对 (03:50)
    • 视频:12-10 框架实现:场景四:旧节点多于新节点时的 diff 比对 (01:33)
    • 视频:12-11 局部总结:前四种 diff 场景的总结与乱序场景 (06:01)
    • 视频:12-12 前置知识:场景五:最长递增子序列 (11:48)
    • 视频:12-13 源码逻辑:场景五:求解最长递增子序列 (32:28)
    • 视频:12-14 源码阅读:场景五:乱序下的 diff 比对 (19:03)
    • 视频:12-15 源码阅读:场景五:乱序下的 diff 比对 (28:34)
    • 视频:12-16 框架实现:场景五:乱序下的 diff 比对 (06:55)
    • 视频:12-17 总结 (05:35)
  •  
  • 第13章 compiler 编译器 – 编译时核心设计原则6 节 | 31分钟

    编译器是 vue 中最后一个大模块,里面涉及到了一些冷僻的概念和复杂的逻辑。所以想要学习编辑器,那么我们需要先站在足够高的“地方” 俯视整个编辑器逻辑,掌握它的核心执行规律。

    收起列表

    • 视频:13-1 前言 (07:45)
    • 视频:13-2 模板编译的核心流程 (03:44)
    • 视频:13-3 抽象语法树 – AST (05:49)
    • 视频:13-4 AST 转化为 JavaScript AST ,获取 codegenNode (07:04)
    • 视频:13-5 JavaScript AST 生成 render 函数代码 (05:08)
    • 视频:13-6 总结 (01:10)
  •  
  • 第14章 compiler 编译器 – 构建 compile 编译器18 节 | 278分钟

    AST 抽象语法树、JavaScript AST、render 函数生成。在我们了解了整个编译的大步骤之后,接下来我们就需要深入各个步骤,来掌握编译器的执行过程了。

    收起列表

    • 视频:14-1 前言 (01:32)
    • 视频:14-2 扩展知识:JavaScript与有限自动状态机 (14:02)
    • 视频:14-3 扩展知识:扫描 tokens 构建 AST 结构的方案 (08:02)
    • 视频:14-4 源码阅读:编译器第一步:依据模板,生成 AST 抽象语法树 (44:26)
    • 视频:14-5 框架实现:构建 parse 方法,生成 context 实例 (07:49)
    • 视频:14-6 框架实现:构建有限自动状态机解析模板,扫描 token 生成 AST 结构 (35:41)
    • 视频:14-7 框架实现:生成 AST,构建测试 (05:08)
    • 视频:14-8 扩展知识:AST 到 JavaScript AST 的转化策略和注意事项 (06:18)
    • 视频:14-9 源码阅读:编译器第二步:转化 AST,得到 JavaScript AST 对象 (34:46)
    • 视频:14-10 框架实现:转化 JavaScript AST,构建深度优先的 AST 转化逻辑 (18:07)
    • 视频:14-11 框架实现:构建 transformXXX 方法,转化对应节点 (20:09)
    • 视频:14-12 框架实现:处理根节点的转化,生成 JavaScript AST (08:45)
    • 视频:14-13 扩展知识:render 函数的生成方案 (09:32)
    • 视频:14-14 源码阅读:编译器第三步:生成 render 函数 (25:06)
    • 视频:14-15 框架实现:构建 CodegenContext 上下文对象 (05:21)
    • 视频:14-16 框架实现:解析 JavaScript AST,拼接 render 函数 (26:03)
    • 视频:14-17 框架实现:新建 compat 模块,把 render 转化为 function (04:18)
    • 视频:14-18 总结 (02:07)
  •  
  • 第15章 compiler 编译器 – 深入编辑器处理逻辑(困难)14 节 | 128分钟

    仅仅掌握一个基础的编译器,可能并不能满足大家的胃口。所以在本章中,我们将深入编译器逻辑,从响应性处理、多层渲染、指令这三个方面入手,帮助大家深入编译器逻辑。

    收起列表

    • 视频:15-1 前言 (01:34)
    • 视频:15-2 响应性数据的编辑器处理:响应性数据的处理逻辑 (07:16)
    • 视频:15-3 响应性数据的编辑器处理:AST 解析逻辑 (06:01)
    • 视频:15-4 响应性数据的编辑器处理:JavaScript AST 转化逻辑 (05:12)
    • 视频:15-5 响应性数据的编辑器处理:render 转化逻辑分析 (02:49)
    • 视频:15-6 响应性数据的编辑器处理:generate 生成 render 函数 (07:23)
    • 视频:15-7 响应性数据的编辑器处理:render 函数的执行处理 (06:17)
    • 视频:15-8 多层级模板的编辑器处理:多层级的处理逻辑 (04:32)
    • 视频:15-9 基于编辑器的指令(v-xx)处理:指令解析的整体逻辑 (06:24)
    • 视频:15-10 困难-基于编辑器的指令(v-xx)处理:AST 解析逻辑 (20:37)
    • 视频:15-11 困难-基于编辑器的指令(v-xx)处理:JavaScript AST ,构建 vif 转化模块 (41:08)
    • 视频:15-12 基于编辑器的指令(v-xx)处理:JavaScript AST ,transform 的转化逻辑 (03:50)
    • 视频:15-13 基于编辑器的指令(v-xx)处理:生成 render 函数 (13:43)
    • 视频:15-14 总结 (01:03)
  •  
  • 第16章 运行时 + 编译时 – 合并 vue 处理逻辑4 节 | 31分钟

    三大模块的合并策略,助你得到一个属于自己的 vue 3 框架

    收起列表

    • 视频:16-1 前言 (03:06)
    • 视频:16-2 基于 render 渲染的 createApp 的构建逻辑 (17:44)
    • 视频:16-3 基于 template 渲染的 createApp 的构建逻辑 (07:33)
    • 视频:16-4 总结 (02:17)
  •  
  • 第17章 课程总结1 节 | 2分钟

    本章是课程的最后一节了,到此课程就完结了,武功秘籍已经传授给大家了,后面大家就要自己闯荡江湖了。

    收起列表

  •  
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发
头像
需要任何资料可以留言!站长和网友帮你找!
提交
头像

昵称

取消
昵称表情

    暂无评论内容

推荐