前端框架源码剖析-腾讯云开发者社区

开发者社区

文档建议反馈控制台

腾讯云架构师技术同盟

文章/答案/技术大牛

发布

前端框架源码剖析

专栏成员

23

文章

24902

阅读量

17

订阅数

Vue3源码13: 从AST到render函数（transform与代码生成）

vue.js css 编程算法 node.js

我们在上一篇文章中已经知道了从模版字符串到返回虚拟Node的render函数需要经历三个阶段：

2022-09-27

7010

Vue3源码12: 编译过程介绍及AST的生成过程分析

vue.js 编程算法

本文先会分析Vue3的编译过程主要包含哪些环节，理解了主体环节后，再带着大家深入分析AST的生成过程。

2022-09-27

5550

Vue3源码11: 编译优化之Block Tree 与 PatchFlags

node.js vue.js vr 视频解决方案编程算法打包

Vue3是一个编译时和运行时相结合的框架。所谓编译时就是把我们编写的模版代码转化成一个render函数，该render函数的返回结果是一个虚拟Node，而运行时的核心工作就是把虚拟Node转化为真实Node进而根据情况对DOM树进行挂载或者更新。前面的文章已经分析了虚拟Node转化为真实Node的核心流程，但有些细节并没有讲，原因是这些内容和本文的主题Block Tree和PatchFlags相关，没有这些背景知识很难去理解那些内容。

2022-09-27

1.5K0

Vue3源码10: 名动江湖的diff算法

vue.js node.js 编程算法

本文会从函数patchChildren函数讲起，先让大家理解该函数的核心功能。接着分析diff算法的具体实现。

2022-09-27

7000

Vue3源码09: 组件的渲染和更新流程

node.js vue.js 面向对象编程编程算法

前面我们分析patch函数的时候，我们知道了内部通过不同类型的判断来调用不同的函数来比较新旧虚拟Node之间的差异并抹平这种差异，当时也介绍了patch函数调用的部分函数实现细节。本文会带着大家分析processElement和processComponent这两个函数的大部分源码实现，并在文末以一张流程图来概括patch函数的核心工作流程，至于diff函数的具体实现，作为一个难点，将会在下一篇文章中深入讲解。

2022-09-27

9610

Vue3源码08: 虚拟Node到真实Node的路其实很长

前面我们知道了，从虚拟Node到真实Node是借助一个叫做render的函数来完成。本文会带着大家进入render函数，先从从总体上把握Vue3的渲染核心流程以及部分源码实现细节。至于比较重要的一些细节，比如组件如何渲染如何更新，diff算法具体如何实现，将在后续的文章一一进行分析。

2022-09-27

4800

Vue3源码07: 故事要从createApp讲起

vue.js node.js 打包编程算法 api

读完前面的文章，相信大家已经能对Vue3的响应式原理有比较深入的掌握。但仅仅掌握响应式原理是不够的，我认为Vue3有3大支柱。

2022-09-27

5700

Vue3源码06: reactive、ref相关api源码实现

vue.js react node.js 官方文档网络安全

函数createReactiveObject最关键的逻辑，就是创建了一个Proxy实例并设置处理器。根据类型不同，处理器可能是处理集合类对象的处理器或者处理普通对象的处理器。从函数reactive代码可知，传入的处理器分别是mutableHandlers和mutableCollectionHandlers。接下来我们看看这两个处理器中的代码实现。

2022-09-27

7910

Vue3源码05 : Vue3响应式系统源码实现（2/2）

react 编程算法 vue.js typescript

在前面的文章中，我们分析了reactive、effect、mutableHandlers之间的相互协作关系。本文会重点分析effect.ts中的每一个API及相关代码的实现细节，因为响应式原理的核心是Proxy代理机制，还有一个特别重要的就是对依赖关系的管理，而依赖关系的管理主要逻辑在effect.ts文件中完成，同时还会带着大家阅读computed的源码实现。鉴于涉及了响应式系统的很多实现细节，这是一篇比较长的文章，文字加代码超过2万个字符，请大家在耐心和时间上做好准备，阅读完本文相信会让大家对Vue3响应式系统有深刻的理解。

2022-09-27

9242

Vue3源码04: Vue3响应式系统源码实现1/2

typescript android react 网络安全 vue.js

从图中可以看出，reactivity的具体实现由12个代码文件组成。看过上一篇文章的朋友可能会觉得惊讶，当时极简版的代码是这样的简单，不足50行。没错，当时写的极简版响应式系统仅用少量代码就实现了修改对象的属性，自动触发页面更新的功能。相信50行代码和12个文件之间的差距不仅仅是边界条件处理那么简单。但是也不用担心，只要抓住了这些文件间的关系就可以消除心中的疑惑，因为根本的原理确确实实就是我们前面手写的极简版。我们先来看看这12个文件具体的分工是什么：

2022-09-27

3280

Vue3源码03: Vue3响应式核心原理

有可能朋友们会疑惑，源码分析为什么要从reactivity讲起，而不是从其他地方开始分析？请大家先看Vue3官方文档中的包依赖关系图：

2022-09-27

4860

Vue3源码02: 项目构建流程和源码调试方法

javascript vue.js

对项目的构建，本质上就是执行一段程序，让我们编写的代码，处理成一个符合实际场景需要的可执行的程序文件。当然对于Vue3的构建也不例外。在Vue3中，根据实际需要的不同，执行构建的命令是：pnpm run build或pnpm run dev。这里用pnpm还是npm没什么区别，为什么呢？因为执行pnpm run dev或npm run dev，本质上都是执行一个js程序，而这个js文件是一样的，从package.json可以找到对应的文件。我们看下面代码：

2022-09-27

9000

Vue3源码01 : 代码管理策略-monorepo

yarn node.js javascript vue.js npm

从定义中可以知道，monorepo是一种策略，该策略的具体内容是：多个项目存储在同一个代码仓库中。采用一种策略，肯定是因为该策略具备一些优点。当然，也要认清其缺点。从下面这张图中，我们可以看出，项目代码的组织策略是在实践中诞生，不断发展变化的。

2022-09-27

1.3K0

微前端08 : single-spa中的reroute函数

编程算法 javascript node.js

在开始本文之前，我们将微前端07 : 对single-spa的路由管理及微应用状态管理的分析中的微应用状态切换流程图放到这里，方便大家阅读本文的时候进行回顾：

2022-09-27

4440

微前端07 : 对single-spa的路由管理及微应用状态管理的分析

api 编程算法 javascript node.js

从流程图中，关于路由管理的初始化，single-spa做了4件事情。我们同时看看代码：

2022-09-27

1.5K0

微前端06 : single-spa的注册机制

jquery 编程算法 javascript node.js

从整体上看，registerApplication一共做了4件比较重要的事情。首先，是对参数进行处理，对应代码片段1中的关键点1，参数处理函数sanitizeArguments有几十行代码，具体怎么处理的，逻辑相对简单，这里就不描述了。对参数的合理处理，给用户提供了更多的灵活性，可以通过不同形式来传递参数，然后将不同格式的参数处理成统一格式。同时，对参数进行了校验。这种写法很常见，在我们日常编程中可以借鉴。其次，是将微应用保存到数组apps中，apps是一个全局变量，会存放所有的注册过的微应用。这个数组很重要，微应用的各种状态都保存在这里，实际上single-spa的核心工作就是对apps中保存的微应用进行管理和控制。再次，是调用ensureJQuerySupport函数对JQuery的某些监听事件进行拦截，下文中进行详述。最后，是调用reroute函数，主要是加载微应用，下文中会进行详述。

2022-09-27

4850

微前端05 : 乾坤loadMicroApp方法实现以及数据通信机制分析

parcel 腾讯云开发者社区

微前端02 : 乾坤的微应用加载流程分析(从微应用的注册到loadApp方法内部实现)

2022-09-27

3.4K0

微前端04 : 乾坤的资源加载机制(import-html-entry的内部实现)

html 编程算法 css php linux

我们先来看一张流程图：接下来我会根据流程图的顺序依次对其中重要环节依次进行讲解，请看下文。

2022-09-27

1.6K0

微前端03 : 乾坤的沙箱容器分析（Js沙箱机制建立后的具体应用）

css html 网络安全 bootstrap 编程算法

对沙箱机制的具体应用，本质上就是对沙箱容器的控制，至于什么是沙箱容器，我们直接看代码：

2022-09-27

8681

微前端02 : 乾坤的微应用加载流程分析(从微应用的注册到loadApp方法内部实现)

我们在微前端01 : 乾坤的Js隔离机制原理剖析（快照沙箱、两种代理沙箱）一文中提到过，乾坤建立在single-spa的基础上，相对于single-spa，乾坤主要完成了两件事，微应用的加载和资源隔离。本文主要探讨乾坤中微应用的加载过程。

2022-09-27

2.9K0

点击加载更多

社区活动

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·干货材料·成员作品最新动态