首页 实战 Vue3源码解析,打造自己的Vue3框架,领悟尤大思维精髓
收藏

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

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

Vue3源码解析,打造自己的Vue3框架,领悟尤大思维精髓

难度 高级 时长 31小时 学习人数 136 综合评分 10.00

这不是一个高冷、不接地气的源码课!而是一个从开发者实际工作角度出发,结合 Vue 3 的设计机制,通过产出一个精简版 Vue 3 框架的方式,让大家可以站在 Vue 3 源码设计者的角度,俯视所有业务场景,彻底搞清楚每一行 Vue 代码背后,Vue 都做了什么!课程的核心设计原则:让更多的人,以更轻松的方式,学习Vue 3 源码!

Sunday
讲师

全栈工程师

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
课程目标

成为一个前端高手的最佳方式就是循迹高手的脚步

从实际工作场景出发,真正掌握Vue3源码,实现技术深度与思维的双重提升!

了解 Vue3源码实现原理
读懂尤大理念精髓
掌握Vue源码设计思想,彻底掌握响
应系统、运行时、编译器三大模块,
由内到外看透Vue
打造专属 Vue3框架
提升技术深度与广度
用最低的门槛实现一个
「 Vue-next-mini 」框架
拓展编程思路
像大神一样思考
提升技术视野,拓展编程思路,
向大神更近一步
课程亮点

以测试用例为驱动,致力于用最少的代码实现逻辑,降低学习难度

· Vue3框架设计 ·
  • · 命令式编程、声明式编程配置
  • · 运行时、编译时
  • · Vue3 源码 TypeScript 配置方案
  • · Vue3 源码调试方案(sourceMap 、 热更新)
  • · Vue3 源码代码标准处理
  • · 模块打包器 rollup
· Reactivity响应性 ·
  • · Vue2 响应性设计及缺陷 · Vue3全新响应性 API(Proxy、Reflect)
  • · 响应性 API (reactive 、 ref) · 调度系统(lazy 、 dirty 、 scheduler)
  • · 计算属性与侦听器(computed 、 watch)
  • · 依赖处理与代理监听(WeakMap 、 Dep 、 track 、 trigger 、 effect)
· Runtime运行时 ·
  • · 虚拟节点树(VNode 、 h 函数)
  • · 渲染器与渲染函数 (Element、Text、comment、Fragment......等 挂载、更新、打补丁)
  • · 属性处理(class 与 style 的增强处理、vei 事件更新、HTML Attributes 、 DOM Properties)
  • · 组件构建(状态组件、生命周期钩子、组件的响应性
  • · composition API
  • · 全新的 diff 算法(最长递增子序列 、 五大场景的详细解析)
· Compiler编辑器 ·
  • · 编辑器处理流程(编译前端、编译后端)
  • · 有限自动状态机
  • · parse(抽象语法树 AST)
  • · transform (JavaScript AST)
  • · generate (目标代码生成)
  • · 深入编辑器(编辑器的响应性、多层级渲染、指令处理)

资料完备,仅几十万字的图文节就堪比Vue3源码书籍的体量

190篇图文节,超40万字,让学习有迹可循

课程大纲
第1章 课程导读
明确课程的核心:这是一个让《初级软件开发工程师都能够学会》同时可以让《高级软件工程师也能收获颇多,更进一步》的源码课
第2章 框架设计前瞻 - 框架设计中的一些基本概念
本章节主要需要介绍框架设计中的基本概念,因为对于很多开发者而言,平时工作中,更多的是针对应用进行开发,对框架本身的设计接触比较少,所以我们需要在一开始的时候,进行一个科普。
第3章 Vue 3源码结构 - 搭建框架雏形
主要讲解Vue 3 源码如何进行 debugger、源码的各个模块是如何进行划分与配合工作的、Vue 3 的代码框架设计有什么独特之处。
第4章 响应系统 - 响应系统的核心设计原则
从 vue 2 到 vue 3,从 Object.defineProperty 到 Proxy 。这样的升级带来了什么样的变化,Object.defineProperty 又存在哪些设计层的缺陷呢?本章统统告诉你
第5章 响应系统 - 初见 reactivity 模块
reactive 函数是响应性的核心函数之一。本章将讲解 reactive 函数是如何构建响应性的、vue 3对它的处理是什么、我们又应该如何实现它。
查看完整目录
专属服务

每个慕课网课程,都是一个专业的技术社区

个性化增值服务,学习有保障更高效

答疑专区+技术社区
连百度谷歌都搜不到的问题,在这里讲
师都将耐心详细解答,更有小伙伴一起
交流互动,共同进步。
课程全套代码下载
提供课程全套源代码下载,包含:
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。
独家“动态”教辅材料
丰富的专属教辅资料上传更新,通过课程
教案、原理图解、技术文档、演示案例等
各种教材,保障你的学习效果。
实用图文资料
课程配置了相应的图文电子文档,与视
频相配合,既保障学习效果,又提高了
学习效率。
适合人群
想要更深入的了解Vue的开发者
要在面试或者竞争中脱颖而出的开发者
技术储备
HTML5/CSS3/JS(ES6)
TypeScript
Vue基础
环境参数
node 14.17.3
npm 7.19.1
Vue 3.2.37
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

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

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