Vue3技术揭秘,渐进式揭秘Vue3源码的设计过程和架构思想

你会学到什么?

课程简介

随着 Vue 3 正式版本的发布,未来 Vue 3 将会成为前端的主流框架,这个毋庸置疑。Vue 3 在使用方面会兼容部分 Vue 2.x 的特性,比如 options API

所以,究竟是要先学习 Vue 2 打好基础,还是直接学习 Vue 3 呢?

当 Vue 作者尤大面对这样的提问时,直接给出了非常坚定的回答:直接学 Vue 3 就行了,基础概念是一模一样的。

不过,在学习使用 Vue 3 的过程中,很多小伙伴会遇到一些痛点问题,比如:

  • Vue 3 渲染器做了哪些事情?
  • Vue 3 的响应式和 Vue 2 相比有什么不同?
  • Vue 3 编译器的过程是什么样的?
  • Vue 3 传说中的编译时优化,究竟做了哪些工作?
  • Vue 3 一些内置内容究竟是如何运作的?
  • ……

只有解答了上述这些问题,才能更好地使用高性能的 Vue.js,也可以帮助你在做项目的时候,在了解 Vue 运行机制的前提下,写出性能更优的代码。另外,很值得一提的是,在阅读 Vue 3 源码的时候,你会发现大量优秀的设计模式和算法,让人拍案叫绝。

但是,直接去啃 Vue 3 源码会非常晦涩难懂,比如一个 baseCreateRenderer 函数就有接近 2000 行代码,可能会让你半途而废(妥妥地“从入门到放弃”),这个估计很多小伙伴们都深有体会。

所以,本小册一方面会对 Vue 3 核心源码做适量的精简,让你可以只用关注核心逻辑实现;另一方面,也配了大量的插图,一图胜千言,可以更加生动地向你展示源码的运行机制。

本小册主要划分为了 5 大模块 来依次为你揭开 Vue 3 的“神秘面纱”。

  • 模块一:渲染器实现原理。从根组件初始化开始,一步步介绍组件实例化、完整更新、diff 过程等。
  • 模块二:响应式原理。核心介绍 Vue 3 基于 Proxy 实现的响应式原理,深入解读依赖收集过程、响应式触达过程和相关联的 watch、computed、inject/provide 函数实现以及异步批量更新原理。在学习的过程中,你会渐进式体会到与 Vue 2 响应式原理的差异以及异步批量更新的不同之处。
  • 模块三:编译器实现原理。重点讲解模板是如何被一步步编译成渲染函数的,以及在编译时 Vue 3 所做的大量编译时优化的工作。
  • 模块四:内置组件实现原理。主要介绍 Vue 3 几个常用的内置组件:Transition、KeepAlive、Teleport 、Suspense 相关的组件运行机制和实现原理。
  • 模块五:特殊元素&指令。重点分析 v-model 是如何实现双向数据绑定的,以及 slot 插槽是如何实现内容分发的。

为方便你理解,我整理出来了如下的思维导图:

Vue3技术揭秘,渐进式揭秘Vue3源码的设计过程和架构思想

相信掌握了本小册这些模块的核心原理之后,你再去阅读 Vue 3 源码或者是解决 Vue 3 的疑难杂症时,会更加得心应手。

课程目录

开篇词:
渲染器:组件是如何被渲染成 DOM 的?
渲染器:数据访问是如何被代理的?
渲染器:组件是如何完成更新的?
渲染器:数组子节点的 diff 算法
响应式原理:基于 Proxy 的响应式是什么样的?
响应式原理:副作用函数探秘
响应式原理:Vue 3 的 nextTick ?
响应式原理:watch 函数的实现原理
响应式原理:computed 函数和普通函数有什么不同?
响应式原理:依赖注入实现跨级组件数据共享
编译器:模板是如何被编译成 AST 的?
编译器:AST 是如何被转换成 JS AST 的?
编译器:JS AST 是如何生成渲染函数的?
编译器:编译过程中的优化细节
内置组件:Transition 是如何实现的?
内置组件:KeepAlive 保活的原理
内置组件:Teleport 是如何实现选择性挂载的?
内置组件:Suspense 原理与异步
特殊元素&指令:双向绑定是如何实现的?
特殊元素&指令:slot 插槽元素是如何实现的?
结语:再回首,纵观 Vue 3 实现

讲师介绍

muwoo,前端技术专家。曾就职于蚂蚁集团,之前对 Vue 2.x 源码有过深层次的研究和探索,并在 Github 上开源了相关的技术文章:Vue 2.x 技术揭秘,目前已有超过 2k+ star 

自 Vue 3 诞生以来,就一直关注其每次的 Changelog,另外,还在公司内部使用并推广 Vue 3 及其周边工具,可以说对 Vue 3 的成长、演变、源码和运行机制等都有过深入研究。

近期开源了一个基于 Vue 3 + Electron 的开源项目 rubick ,目前已有近 3.8k star

个人相关主页如下:

  • GitHub:github.com/muwoo
  • 知乎:www.zhihu.com/people/monk…
  • B 站:space.bilibili.com/355783263
Like (0)
Previous 2023年3月6日 下午10:21
Next 2023年3月7日 上午9:31

相关推荐

发表回复

Please Login to Comment