【我要学源码】 Vue3源码知识剖析

前言

Vue3.0 在去年 9 月正式发布了,随着Vue3.0愈来愈热。小编此时怀着激动的心灵跟随者大佬一起深源码,让我一起探索Vue3.0所带来的奇特魅力。

首先

在开始研究源码前,小编特意要感谢我们的B站Up主【村长】也是Vue3的Contributor 解铃还须系铃人,当然跟着源码贡献者一起深挖究竟,探索其背后的故事,可谓是干货满满~~ 哈哈哈!!!,其他小伙伴一定要关注主播,学习前端不迷路。

WechatIMG63.jpeg

正文

好啦~~ 说了一大堆,接下来让我一起进入Vue3.0的探索之路。

1.首先要从github上clone一下源码的地址:github.com/vuejs/core.…

2.介于Vue3.0的依赖环境变为pnpm所以我们需要在自己的电脑上安装一下依赖环境
安装pnpm教程: pnpm.io/installatio…

3.为了使我们的项目能够快速的安装依赖模块所以我们需要在项目的目录文件中删除以下这两项

image.png

Puppeteer 是一个Node库,支持调用Chrome的API来操纵Web

在我们的项目中使用不到它,所以。干掉即可。

4.使用 pnpm install 开始安装依赖,当出现以下状态说明安装成功。

WechatIMG65.jpeg

5.随后我们需要在目录文件中加上一段代码,为了更好地方便我们找到各个包的依赖关系。

WechatIMG66.jpeg

6.运行 npm run dev 指令开始打包运行
我们在用Vue3.0做项目时,不管是用的哪种打包工具,Webpack 或是 Vite 之类的打包工具,我们在项目中使用最重要的一项就是

import * from "vue"

因此小编推断,我们在使用vue的api时是从这个包名引入,所以在源码中肯定存在vue这个包名

WechatIMG67.jpeg

果然,源码中存在一个vue的包
其次,我们就要从这个文件开始入手

WechatIMG68.jpeg

首先,我在学习源码要树立一个明确的方向,就是,我们要从哪个方法入手,这里小编会从两个地方入手。
一个是从创建组件实例下手也就是 createApp(), 另一个就是从挂载根元素上下手 mount() 逆向反推。
其次,我们打开 todomvc.html 文件 通过在 createApp() 处的断点切入进去,我们会看到创建组件实例的方法来自于 ensureRenderer()。

WechatIMG69.jpeg

WechatIMG71.jpeg 其次我们通过断点的方式找到这个函数来自于 vue => runtime-dom/src 这个依赖包。随后你在源码中可以发现在 index.ts 文件中 会有三个依赖,其中明显可以看出 runtime-domcompiler-dom 是已经引入此文件中,但是其中还有一个隐性的依赖是 reactivity

erDiagram
vue ||--o{ runtime-dom : import
vue ||--o{ compiler-dom : import
runtime-dom ||--o{ runtime-core : import
vue ||--o{ reactivity : import

所以对于项目初始化来说,我们只需要研究 vue => compiler-dom 这条线即可。
runtime-dom 为扩展浏览器平台,runtime-core 为vue通用代码
我们看到 ensureRenderer() 这个方法给你返回了一个 renderer 的渲染器,renderercreateRenderer 创建。

renderer => createRenderer => renderer.ts

WechatIMG72.jpeg

createRenderer 这个函数中反回了一个叫做 baseCreateRender 的函数,这也是迄今为止Vue3.0中最大的一个工厂函数,有两千多行代码。最终锁定在 2358 行这里我们最终看到这个渲染器返回的是一个对象。

WechatIMG73.jpeg

这里返回的属性小编已经在图上备注了,这里就不在解释啦~
到这里我们真正的切入点就找到了。
接下来我们切入 createAppAPI 这个函数看到。

WechatIMG75.jpeg

WechatIMG76.jpeg

看到这里我们是不是很熟悉呢,没错!!! 这个函数返回给我们的所使用的方法,就是 createApp 实例上的 api,这里我们需要着重看一下 mount 函数,当我们展开这个函数会看到我们真正给 createApp 里面传递的配置对象最终都会被vue当作 rootComponent 来处理。

WechatIMG77.jpeg

mount 函数在组建实例被创建后挂载到宿主元素上时,只会执行一次,即首次执行就会把传入的配置对象创建成 vnode 也就是所谓的虚拟 dom 随后通过 render 函数以及 patch 方法最终渲染成一颗真是的 dom 树。

vue 的工作方式: 创建组建实例 => 得到一个 rootComponent => 生成 vnode(虚拟dom) => render(vnode, rootComponent) => patch() => 真实DOM

WechatIMG78.jpeg

总结

这一章内容没有深入很多源码的学习,就是在学习源码之初寻找切入点,遵循一条主线去深入,可以通过浏览器断点方式去调试,也可以直接痛过运行脚本去切入,总之第一 part 到这就结束啦,后续还会继续更新Vue3.0源码的探索之路。

猜你喜欢

转载自juejin.im/post/7054479620996857886