首页 实战

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

以轻松的方式解构Vue3源码，掌握高阶编程思维

难度：高级
|
时长：共 31 小时
￥599.00
距离活动结束
报名人数已满
  • 打造个人专属的Vue3框架，向高阶大神迈近
  • 打造个人专属的Vue3框架，向高阶大神迈近
  • 打造个人专属的Vue3框架，向高阶大神迈近
  • 打造个人专属的Vue3框架，向高阶大神迈近
  • 打造个人专属的Vue3框架，向高阶大神迈近
  • 打造个人专属的Vue3框架，向高阶大神迈近
这不是一个高冷、不接地气的源码课！而是一个从开发者实际工作角度出发，结合 Vue 3 的设计机制，通过产出一个精简版 Vue 3 框架的方式，让大家可以站在 Vue 3 源码设计者的角度，俯视所有业务场景，彻底搞清楚每一行 Vue 代码背后，Vue 都做了什么！课程的核心设计原则：让更多的人，以更轻松的方式，学习Vue 3 源码！
展开所有
第1章 课程导读
1 节｜10分钟
展开
  • 视频：
    1-1 课程导读
    09:39
第2章 框架设计前瞻 - 框架设计中的一些基本概念
12 节｜81分钟
收起
  • 视频：
    2-1 前言
    01:54
  • 视频：
    2-2 编程范式之命令式编程
    06:19
  • 视频：
    2-3 编程范式之声明式编程
    04:27
  • 视频：
    2-4 企业应用的开发与设计原则
    06:56
  • 视频：
    2-5 为什么说框架的设计过程其实是一个不断取舍的过程？
    05:49
  • 视频：
    2-6 .vue 中的 html 是真实的 html 吗？
    04:56
  • 视频：
    2-7 什么是运行时？
    17:16
  • 视频：
    2-8 运行时 + 编译时
    16:19
  • 视频：
    2-9 什么是副作用
    04:07
  • 视频：
    2-10 Vue 3 框架设计概述
    04:47
  • 视频：
    2-11 扩展：所谓良好的 `TypeScript` 支持，是如何提供的？
    06:11
  • 视频：
    2-12 总结
    01:04
第3章 Vue 3源码结构 - 搭建框架雏形
11 节｜72分钟
收起
  • 视频：
    3-1 前言
    01:27
  • 视频：
    3-2 创建测试实例：在 Vue 源码中运行测试实例
    09:01
  • 视频：
    3-3 跟踪解析运行行为：为 vue 开启 SourceMap
    09:06
  • 视频：
    3-4 授人以鱼：如何针对源码进行 debugger
    05:06
  • 视频：
    3-5 授人以渔：如何阅读源码
    07:24
  • 视频：
    3-6 开始搭建自己的框架：创建 vue-next-mini
    06:02
  • 视频：
    3-7 为框架进行配置：导入 ts
    07:44
  • 视频：
    3-8 引入代码格式化工具：prettier 让你的代码结构更加规范
    06:10
  • 视频：
    3-9 模块打包器：rollup
    12:38
  • 视频：
    3-10 初见框架雏形：配置路径映射
    05:16
  • 视频：
    3-11 总结
    01:27
第4章 响应系统 - 响应系统的核心设计原则
7 节｜53分钟
展开
  • 视频：
    4-1 前言
    01:50
  • 视频：
    4-2 JS 的程序性
    04:35
  • 视频：
    4-3 如何让你的程序变得更加“聪明”？
    05:24
  • 视频：
    4-4 Object.defineProperty 在设计层的缺陷
    08:59
  • 视频：
    4-5 vue3的响应性核心 API：proxy
    14:20
  • 视频：
    4-6 proxy的最佳拍档：Reflect—拦截 js 对象操作
    15:13
  • 视频：
    4-7 总结
    01:51
第5章 响应系统 - 初见 reactivity 模块
7 节｜53分钟
展开
  • 视频：
    5-1 前言
    01:55
  • 视频：
    5-2 -2 源码阅读：reactive 的响应性，跟踪 Vue 3 源码实现逻辑
    17:03
  • 视频：
    5-3 框架实现：构建 reactive 函数，获取 proxy 实例
    12:57
  • 视频：
    5-4 框架实现：什么是 WeakMap？它和 Map 有什么区别？
    09:19
  • 视频：
    5-5 热更新的开发时：提升开发体验
    03:14
  • 视频：
    5-6 框架实现：构建 effect 函数，生成 ReactiveEffect 实例
    07:02
  • 视频：
    5-7 总结
    01:26
第6章 响应系统 - ref 的响应性
9 节｜65分钟
展开
  • 视频：
    6-1 前言
    01:06
  • 视频：
    6-2 -1源码阅读：ref 复杂数据类型的响应性
    15:30
  • 视频：
    6-3 -2源码阅读：ref 复杂数据类型的响应性
    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 && computed
15 节｜175分钟
展开
  • 视频：
    7-1 开篇
    01:04
  • 视频：
    7-2 -1 源码阅读：computed 的响应性，跟踪 Vue 3 源码实现逻辑
    15:53
  • 视频：
    7-3 -2 源码阅读：computed 的响应性，跟踪 Vue 3 源码实现逻辑
    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 数据监听器的依赖收集
    03:31
  • 视频：
    7-9 -1 源码阅读：响应性的数据监听器 watch，跟踪源码实现逻辑
    19:40
  • 视频：
    7-10 -2 源码阅读：响应性的数据监听器 watch，跟踪源码实现逻辑
    17:13
  • 视频：
    7-11 框架实现：深入 scheduler 调度系统实现机制
    25:26
  • 视频：
    7-12 框架实现：初步实现 watch 数据监听器
    18:57
  • 视频：
    7-13 问题分析：watch 下的依赖收集原则
    05:24
  • 视频：
    7-14 总结：watch 数据侦听器
    01:52
  • 视频：
    7-15 总结
    02:07
第8章 runtime 运行时 - 运行时核心设计原则
6 节｜43分钟
展开
  • 视频：
    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 函数，生成 Vnode
13 节｜108分钟
展开
  • 视频：
    9-1 前言
    01:44
  • 视频：
    9-2 -1 阅读源码：初见 h 函数，跟踪 Vue 3 源码实现基础逻辑
    10:39
  • 视频：
    9-3 -2 阅读源码：初见 h 函数，跟踪 Vue 3 源码实现基础逻辑
    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分钟
展开
  • 视频：
    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分钟
展开
  • 视频：
    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 节｜201分钟
展开
  • 视频：
    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:50
  • 视频：
    12-13 源码逻辑：场景五：求解最长递增子序列
    32:28
  • 视频：
    12-14 源码阅读：场景五：乱序下的 diff 比对（未拆分）
    49:39
  • 视频：
    12-15 源码阅读：场景五：乱序下的 diff 比对
    28:34
  • 视频：
    12-16 框架实现：场景五：乱序下的 diff 比对
    06:55
  • 视频：
    12-17 总结
    05:35
第13章 compiler 编译器 - 编译时核心设计原则
6 节｜31分钟
展开
  • 视频：
    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分钟
展开
  • 视频：
    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 编译器 - 深入编辑器处理逻辑（困难）
13 节｜87分钟
展开
  • 视频：
    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 ，transform 的转化逻辑
    03:50
  • 视频：
    15-12 基于编辑器的指令(v-xx)处理：生成 render 函数
    13:43
  • 视频：
    15-13 总结
    01:03
第16章 运行时 + 编译时 - 合并 vue 处理逻辑
4 节｜31分钟
展开
  • 视频：
    16-1 前言
    03:06
  • 视频：
    16-2 基于 render 渲染的 createApp 的构建逻辑
    17:44
  • 视频：
    16-3 基于 template 渲染的 createApp 的构建逻辑
    07:33
  • 视频：
    16-4 总结
    02:17
第17章 课程总结
1 节｜2分钟
展开
  • 视频：
    17-1 总结
    01:51
本课程持续更新中
东东老师
工程师
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
查看更多
数据加载中...
《Vue3源码解析，打造自己的Vue3框架》的真实评价
综合评分：分，共 人参与
篇幅原因，只展示最近100条评价
￥599.00
报名人数已满

学习咨询

选课、学习遇到问题？

扫码添加指导老师 1V1 帮助你！

添加后老师会第一时间解决你的问题

意见反馈 帮助中心 APP下载
官方微信