0%

Vue2 源码学习笔记-01-寻找入口

古语云:眼过千遍不如手过一遍。边调试边学习代码,进步更快。

预备

拉取官方代码

1
git clone https://github.com/vuejs/vue.git

安装依赖

打开 vue 目录,使用

1
yarn

sh
1
npm i

安装依赖。

从 package.json 开始

package.json 乃项目之根本,此文件涵盖项目的配置信息及其依赖包。

在 package.json 中,本次学习主要使用 script 字段中的 dev 命令:

1
2
3
4
"scripts": {
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
...
}

此命令使用 rollup/dist 目录打包输出完整版的 vue.js。因打包后的 vue.js 时压缩过的,故而运行此命令前,需在命令中加上参数 --sourcemap,可同时生成名为 vue.js.map 的映射文件 ,以便调试时看到原始代码。

1
2
3
4
"scripts": {
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",
...
}

寻找入口

在 Vue 项目中,首先会使用 new Vue() 创建 Vue 的实例,因此可直接编写案例打断点来找到 Vue 的构造函数。

另一种方法是通过 rollup 配置文件一步步找寻,但打断点更直截了当。

案例可以放在 /examples 目录下,便于集中管理:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- /examples/test/init.html -->

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>寻找入口</title>
</head>
<body>
<div id="app">
{{msg}}
</div>

<script src="../dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
msg: "hello vue"
}
}
})
</script>
</body>
</html>

在浏览器中打开当前测试案例,在第 17 行打断点刷新并单步进入:

01-init-debugger

当前显示的即 Vue 构造函数所在文件:

02-show-directory

若想定位当前文件在源码目录中的位置,可如上图,右键选择 边栏中显示 即可在左侧看到 Vue 构造函数在 /src/core/instance/index.js


至此,入口已寻得。

坚持原创技术分享,您的支持将鼓励我继续创作!