阅读vue3源码记录(一)

278 阅读2分钟

「这是我参与2022首次更文挑战的第1天,活动详情查看:2022首次更文挑战

环境搭建

要阅读和调试,首先得下载源码。

克隆源码

但是就连克隆代码也会出问题,各种千百度了一番,无果。于是,试试国内镜像 hub.fastgit.org/vuejs/vue-n…。 终于下载好了。其实我几个月前还能正常下载的。

安装依赖

vue3已经改用pnpm包管理器了,所以需要pnpm ,没有就直接用本来的包管理器安装即可。 全局安装了pnpm 之后, 开始运行 pnpm i ,出错了。真是好事多磨。

原因是node版本不支持。pnpm.io/installatio… 这个网址查看pnpm的node相关版本。

支持node12的啊。仔细一看是小版本没跟上,最低要求12.17 ,我刚好是12.16,这就有点那什么了。当场升级 mirrors.huaweicloud.com/nodejs/

换上了12版本的最高版本(因为鄙人用的是win7),成功使用pnpm安装了依赖!。

image.png 不得不说一下,这pnpm 的安装日志, 看起来真的是一目了然。

接下来, 试运行 pnpm dev

image.png 看起来没啥问题 这就是一个实时打包,代码改动后就会重新打包。

打包文件只有一个global.js 为了便于调试 ,需要改变打包方式

添加soucemap

在打包命令后加 —sourcemap. 再次运行 pnpm dev 可以看到打包文件多了一个global.js.map。因为运行时的代码是已经打包过的,也就是经过了编译、压缩处理。即便打了断点,也进不到原来的代码里,而sourceMap可以根据打包后的代码定位到打包前的代码位置。 所以,我们需要在后面加上 --sourcemap

image.png

然后运行 serve命令 自动本地服务 。结果就和启动了liversever是一样的

image.png

断点调试

找一个demo文件打开,在初始化vue实例的地方,打个断点,f9或者f11, 可以看到 能成功进入源码

image.png

明确主线

主线就是主要任务, 两点论和重点论说得好,既要看到主要矛盾又不能忽视次要矛盾,但是主要是抓住主要矛盾。 尤其是我这种小白阅读这样的代码,可能一不小心就陷进去了,忘了自己要干啥。

目前的主要任务定为,了解vue实例化过程,挂载过程。也就是那一行代码

image.png

应用程序实例创建过程

1 createAPP()

2如何创建实例, 实例有哪些组成

挂载过程

vm.mount(el) 挂载过程都做了些什么

方法 单点调试 查看调用栈