1、准备工作
- 下载
vue源码
git clone https://github.com/vuejs/vue.git- 安装
rollup
sudo npm i -g rollup //mac
npm i -g rollup //window- 修改
package.json 中 scripts添加--sourcemap
"scripts": {
"dev": "rollup -w -c scripts/config.js
--sourcemap
--environment TARGET:web-full-dev",
.....
}
- test文件夹下新建测试
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue测试</title>
<script src="../dist/vue.js"></script>
</head>
<body>
<div id='demo'>
<h1>测试vue</h1>
<p>{{foo}}</p>
</div>
<script>
const app = new Vue({
el: '#demo',
data: {
foo: 'foo'
}
})
</script>
</body>
</html>
- 执行
npm run dev后在页面打开test.html
2、开始看代码
2.1 在package.json可以看到入口文件为scripts/config.js执行函数
为web-full-dev
"scripts": {
"dev": "rollup -w -c scripts/config.js --sourcemap --environment
TARGET:web-full-dev"
}2.2 打开 scripts/config.js 找到web-full-dev可以看到他的入口文件是web/entry-runtime-with-compiler.js
那么问题来了,这里的web是代表的那个文件目录呢?在首目录中并没有发现web文件夹🤔?其实很好找到,让我们进入resolve()
统一引入了./alias文件,进入./alias看看吧
综上所述找到入口文件src/platforms/web/entry-runtime-with-compiler.js
3. vue初始化流程
3.1 入口文件代码解析(详见代码注释)
- 获取原始的$mount方法并扩展它:处理template或el选项
- 处理template选项 render>template>el
- render优先级最高
- 设置el,则将其作为模版
- 执行编译,用户编写的模版变成渲染函数
- 执行挂载:虚拟dom->dom
3.2 使用浏览器🏃跑一🏃♀️跑
3.3 打断点调试
4、看vue源码,咋没见vue实例🤔不要着急这就上了😁
4.1 回到我们的入口文件找到引入的vue点进去
4.2 木有,再进
4.3 木有,再进(大佬,你在搞什么,俄罗斯套娃😓吗)
4.4 莫慌,马上就到了(为了代码的可读性我可是做了分层哦😎)
综上所诉找到Vue实例文件:src/core/instance/index.js
5、init?看看它的初始化顺序
5.1 init初始化文件src/core/instance/init.js
- 初始化顺序: 生命周期->事件监听->渲染->beforeCreate->注入->组件状态(data,methods……数据相应化)->提供数据->created
