手把手教你读Vue2源码-2
2021-04-24 本文已影响0人
miao8862
在上一篇中，我们已经学习了怎么搭建环境和查找入口文件、vue初始化方法
这一篇，我们就来学习基本的调试方法，在上篇中，我们已经在test文件夹中创建了一个测试文件，我们在浏览器中打开这个文件
<!-- test/test1.html -->
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="../dist/vue.js"></script>
</head>
<body>
<div id="demo">
<h1>初始化流程</h1>
<p>{{msg}}</p>
</div>
<script>
const app = new Vue({
el: "#demo",
data: {
msg: 'hello'
}
})
</script>
</body>
</html>
调试过程
1. 初始化new Vue()
test1.html文件中在初始化app处打断点，按F11走下一步查看，可以看到进入到我们Vue构造函数，调用了init方法
image.png
2. this.init(options)
同样打上断点，点击下一步，会进入init方法
image.png
3. this.initMixin
在init方法，初始化了各种属性。我们将断点打在合并options的位置，查看一下options合并前后有什么差别：
- 合并前，只有我们定义在
options上的data和el：
image.png
- 合并后，我们可以看到多了一些
components, directives,filter等全局属性
image.png
4. $mount
继续，将断点打到mount方法
image.png
将断点打到最后，进入执行mount方法
image.png
进入mount方法定义，继续打断点，调用了
mountComponent方法
image.png
5. mountComponent
声明了updateComponent，创建了Watcher
image.png
6. _render()
_render获取虚拟dom
7. _update()
_update把虚拟dom转为真实dom
