Vue.js源码全方位深入解析 (含Vue3.0源码分析)

2,626 阅读6分钟

Vue.js源码全方位深入解析 (含Vue3.0源码分析)

超清原画 完整无密 MP4格式

 下载地址:百度云盘

本课程从基础的 Vue源码目录设计、源码构建开始讲起,包括数据驱动,响应式原理,让同学们深入全面理解Vue的实现原理,掌握源码分析技巧,牢固对Vue的使用,斩断BAT进阶拦路虎,快人一步进名企。

**

适合人群

有一定前端基础和 Vue.js 的基础

技术储备要求

1、已经用过 Vue.js 做过 2 个以上的实际项目,对 Vue.js 的思想有了

一定的了解,对绝大部分的 API 都已经有使用。

2、有一定的原生 JavaScript 的功底,并对代码调试有一定的了解。

3、对常用的数据结构、正则表达式等都有一定了解。

章节目录:

**

第1章 准备工作

介绍了 Flow、Vue.js 的源码目录设计、Vue.js 的源码构建方式,以及从入口开始分析了 Vue.js 的初始化过程。

1-1 课程简介试看

1-2 准备工作

1-3 认识 Flow

1-4 Vue.js 源码目录设计

1-5 Vue.js 源码构建

1-6 从入口开始

第2章 数据驱动

详细讲解了模板数据到 DOM 渲染的过程,从 new Vue 开始,分析了 mount、render、update、patch 等流程。

2-1 数据驱动

2-2 new Vue 发生了什么试看

2-3 Vue 实例挂载的实现

2-4 render

2-5 Virtual DOM

2-6 createElement

2-7 update

第3章 组件化

分析了组件化的实现原理,并且分析了组件周边的原理实现,包括合并配置、生命周期、组件注册、异步组件。

3-1 组件化

3-2 createComponent

3-3 patch(上)

3-4 patch(下)

3-5 合并配置(上)

3-6 合并配置(下)

3-7 生命周期

3-8 组件注册(上)

3-9 组件注册(下)

3-10 异步组件(工厂函数)

3-11 异步组件(Promise)

3-12 异步组件(高级)

第4章 深入响应式原理(上)

详细讲解了数据的变化如何驱动视图的变化,分析了响应式对象的创建,依赖收集、派发更新的实现过程,一些特殊情况的处理,并对比了计算属性和侦听属性的实现,最后分析了组件更新的过程。

4-1 深入响应式原理

4-2 响应式对象(上)试看

4-3 响应式对象(下)

4-4 依赖收集(上)

4-5 依赖收集(下)

4-6 派发更新(上)

4-7 派发更新(下)

4-8 nextTick

4-9 检测变化的注意事项

第5章 深入响应式原理(下)

详细讲解了数据的变化如何驱动视图的变化,分析了响应式对象的创建,依赖收集、派发更新的实现过程,一些特殊情况的处理,并对比了计算属性和侦听属性的实现,最后分析了组件更新的过程。

5-1 计算属性 VS 侦听属性(1)

5-2 计算属性 VS 侦听属性(2)

5-3 计算属性 VS 侦听属性(3)

5-4 计算属性 VS 侦听属性(4)

5-5 计算属性 VS 侦听属性(5)

5-6 组件更新(1)

5-7 组件更新(2)

5-8 组件更新(3)

5-9 原理图

5-10 Props --v2.6.11 (一)

5-11 Props --v2.6.11 (二)

5-12 Props-- --v2.6.11(三)

5-13 Props --v2.6.11(四)

5-14 Props--v2.6.11(五)

第6章 编译(上)

从编译的入口函数开始,分析了编译的三个核心流程的实现:parse -> optimize -> codegen。

6-1 编译

6-2 编译入口(上)

6-3 编译入口(下)

6-4 parse(1)

6-5 parse(2)

6-6 parse(3)

6-7 parse(4)

6-8 parse(5)

6-9 parse(6)

6-10 parse(7)

6-11 parse(8)

6-12 parse(9)

6-13 parse(10)

第7章 编译(下)

从编译的入口函数开始,分析了编译的三个核心流程的实现:parse -> optimize -> codegen。

7-1 optimize(上)

7-2 optimize(下)

7-3 codegen(1)

7-4 codegen(2)

7-5 codegen(3)

7-6 codegen(4)

第8章 扩展(上)

详细讲解了 event、v-model、slot、keep-alive、transition、transition-group 等常用功能的原理实现,该章节作为一个可扩展章节,未来会分析更多 Vue 提供的特性。

8-1 扩展

8-2 event(1)

8-3 event(2)

8-4 event(3)

8-5 event(4)

8-6 event(5)

8-7 event(6)

8-8 event(7)

8-9 event(8)

8-10 event(9)

第9章 扩展(中)

详细讲解了 event、v-model、slot、keep-alive、transition、transition-group 等常用功能的原理实现,该章节作为一个可扩展章节,未来会分析更多 Vue 提供的特性。

9-1 v-model(1)

9-2 v-model(2)

9-3 v-model(3)

9-4 v-model(4)

9-5 v-model(5)

9-6 v-model(6)

9-7 v-model(7)

9-8 slot(1)

9-9 slot(2)

9-10 slot(3)

9-11 slot(4)

9-12 slot(5)

9-13 slot(6)

9-14 slot(7)

9-15 slot(8)

9-16 slot(9)

9-17 slot(10)

第10章 扩展(下)

详细讲解了 event、v-model、slot、keep-alive、transition、transition-group 等常用功能的原理实现,该章节作为一个可扩展章节,未来会分析更多 Vue 提供的特性。

10-1 keep-alive(1)

10-2 keep-alive(2)

10-3 keep-alive(3)

10-4 keep-alive(4)

10-5 keep-alive(5)

10-6 keep-alive(6)

10-7 transition(1)

10-8 transition(2)

10-9 transition(3)

10-10 transition(4)

10-11 transition-group(1)

10-12 transition-group(2)

10-13 transition-group(3)

10-14 transition-group(4)

第11章 Vue-Router

分析了 Vue-Router 的实现原理,从路由注册开始,分析了路由对象、matcher,并深入分析了整个路径切换的实现过程和细节。

11-1 Vue Router

11-2 路由注册

11-3 VueRouter 对象

11-4 matcher(1)

11-5 matcher(2)

11-6 matcher(3)

11-7 matcher(4)

11-8 路径切换(1)

11-9 路径切换(2)

11-10 路径切换(3)

11-11 路径切换(4)

11-12 路径切换(5)

11-13 路径切换(6)

11-14 路径切换(7)

11-15 路径切换(8)

11-16 路径切换(9)

11-17 路径切换(10)

11-18 路径切换(11)

第12章 Vuex

分析了 Vuex 的实现原理,深入分析了它的初始化过程,常用 API 以及插件部分的实现。

12-1 Vuex介绍

12-2 Vuex 初始化(1)

12-3 Vuex 初始化(2)

12-4 Vuex 初始化(3)

12-5 Vuex 初始化(4)

12-6 Vuex 初始化(5)

12-7 Vuex 初始化(6)

12-8 Vuex 初始化(7)

12-9 Vuex 初始化(8)

12-10 Vuex 初始化(9)

12-11 API(1)

12-12 API(2)

12-13 API(3)

12-14 API(4)

12-15 API(5)

12-16 插件

本课程已完结

**

超清原画 完整无密 MP4格式

下载地址:百度云盘

**