Vue.js 3.0 核心源码解析

背景介绍：

在过去的几年里，Vue、React、Angular 一直是国内前端的三大主流框架。在 2019 年 Vue 就像一匹黑马力压群雄，独占前端er 的宠爱，Github Star 排名荣登第一也反映了国内开发者对 Vue 的喜爱。

最近，Vue 的作者尤雨溪在 Github 上介绍了 Vue 3.0 的最新进展，目标发布日期是 7 月中旬发布 RC 版本，8 月初发布正式版，也就是说 Vue 3.0 就在眼前！

专栏解读：

专栏将对 Vue.js 3.0 的框架源码进行系统、细致地分析。 深入到内核剖析实现原理，探究源码背后的设计思想。一方面帮你夯实 Vue.js 开发技能，一方面帮你理解源码分析的方式与编程思路，为你从底层逻辑理解优秀框架背后的技术思想。

专栏主要分为以下3个部分：

第一部分核心模块，这个部分会带你去分析 Vue.js 3.0 最核心的组件的实现原理以及 Vue.js 3.0 新特性 Composition API 的实现原理。掌握这个部分，可以让你对组件如何渲染和更新能有深刻的理解，并掌握 Composition API 背后的实现原理和应用场景。

第二部分进阶模块，这个部分会带你分析 Vue.js 3.0 模板的编译和优化过程。带你了解 Vue.js 是如何编译模板并生成代码的，以及编译过程背后的性能优化思想是怎样的。

第三部分扩展模块，将带你分析 Vue.js 3.0 的内置组件的实现原理、Vue.js 3.0 一些实用特性的实现原理以及 Vue.js 3.0 官方生态实现原理。经过学习，你可以了解这些功能的实现原理和职责边界，在平时工作中应用起来更加得心应手。

在学习这门课程后，不仅可以了解 Vue.js 3.0 核心实现原理，还能一定程度地了解背后的设计思想。源码中一些好的编程思路和优秀的代码可以吸收来为自己的工作所用，修炼内功，提升技术能力。

讲师简介：

黄轶（ustbhuangyi） Zoom 前端架构师，前百度、滴滴资深技术专家

现任 Zoom 前端架构师，主要负责推进前后端分离架构方案和 Zoom 自研组件库，不仅将Vue.js 带入 Zoom，而且通过魔改 Vue.js 源码开发了 Vue.js 2.x 的 CSP 兼容版本，并稳定服务于几十个用 Vue.js 做增强开发的页面。之前，他先后在百度和滴滴担任前端资深技术专家，并曾使用 Vue.js 重构了滴滴出行WebApp，主导开发 Vue.js 开源组件库 cube-ui。

目录 /共28节

开篇词

开篇词 | 解析 Vue.js 源码，提升编码能力

导读 | 一文看懂 Vue.js 3.0 的优化

模块一：直击 Vue.js 核心组件的实现

模块一导读 | 组件的实现：直击 Vue 核心的实现

01 | 组件渲染：vnode 到真实 DOM 是如何转变的？

02 | 组件更新：完整的 DOM diff 流程是怎样的？（上）

03 | 组件更新：完整的 DOM diff 流程是怎样的？（下）

模块二：学会新设计 Composition API

模块二导读 | 逻辑复用最佳实践：Composition API

04 | Setup：组件渲染前的初始化过程是怎样的？

05 | 响应式：响应式内部的实现原理是怎样的？（上）

06 | 响应式：响应式内部的实现原理是怎样的？（下）

07 | 计算属性：计算属性比普通函数好在哪里？

08 | 侦听器：侦听器的实现原理和使用场景是什么？（上）

09 | 侦听器：侦听器的实现原理和使用场景是什么？（下）

10 | 生命周期：各个生命周期的执行时机和应用场景是怎样的？

11 | 依赖注入：子孙组件如何共享数据？

模块三：编译过程和背后的优化思想

12 | 模板解析：构造 AST 的完整流程是怎样的？

13 | AST 转换：AST 节点内部做了哪些转换？

14 | 生成代码：AST 如何生成可运行的代码？

模块四：探索更多实用特性背后的实现原理

15 | Props：Props 的初始化和更新流程是怎样的？

16 | 插槽：如何实现内容分发？

17 | 指令：指令完整的生命周期是怎样的？

18 | v-model：双向绑定到底是怎么实现的？

模块五：学习 Vue 内置组件的实现原理

19 | Teleport 组件：如何脱离当前组件渲染子组件？

20 | Suspence 组件：如何优雅地实现组件异步处理流程？

21 | KeepAlive 组件：如何让组件在内存中缓存和调度？

22 | Transition 组件：过渡动画的实现原理是怎样的？

特别放送：研究 Vue 官方生态的实现原理

23 | Vue Router：如何实现一个前端路由？

24 | Vuex：如何实现前端的状态管理？

课程资源截图：