手把手教你读Vue2源码-2
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手把手教你读Vue2源码-2相关的知识，希望对你有一定的参考价值。
参考技术A在上一篇中，我们已经学习了怎么搭建环境和查找入口文件、vue初始化方法
这一篇，我们就来学习基本的调试方法，在上篇中，我们已经在test文件夹中创建了一个测试文件，我们在浏览器中打开这个文件
1. 初始化new Vue()
test1.html文件中在初始化app处打断点，按F11走下一步查看，可以看到进入到我们Vue构造函数，调用了init方法
2. this.init(options)
同样打上断点，点击下一步，会进入init方法
3. this.initMixin
在init方法，初始化了各种属性。我们将断点打在合并options的位置，查看一下options合并前后有什么差别：
4. $mount
继续，将断点打到mount方法
5. mountComponent
声明了updateComponent，创建了Watcher
6. _render()
_render获取虚拟dom
7. _update()
_update把虚拟dom转为真实dom
教你读懂vue源码技术教程
由于 Vue 的源码采用 ES6，所以你至少应该掌握 ES6 才能看得懂，其次你最好对 package.json 中的字段的作用有所了解。由于 Vue 使用 Rollup 构建，所以你不了解 Rollup 的话，你就看不懂 Vue 的构建配置，最后 Vue 采用 flow 做类型系统，最起码就应该知道 flow 的简单语法，否则会影响你看源码。
以上是关于手把手教你读Vue2源码-2的主要内容，如果未能解决你的问题，请参考以下文章
游戏开发实战手把手教你在Unity中使用lua实现红点系统（前缀树 | 数据结构 | 设计模式 | 算法 | 含工程源码）
游戏开发实战手把手教你在Unity中使用lua实现红点系统（前缀树 | 数据结构 | 设计模式 | 算法 | 含工程源码）