Yiming君的VUE世界观

原由

最近终于学会了作图和排版的技巧，如今反过头去看以前写的文章，唔！辣眼睛，真想给本身一巴掌，以前写的是什么玩意~

可是，写都写了，总不能删了吧，只好将来会出一个系列再把以前写的内容给串起来（嗯，又是一项大工程，习惯了本身挖坑本身跳）

以前写过一篇关于Vue源码的文章，但时隔一个月再看，不管是排版仍是对源码的理解都不尽人意，因此此次但愿能把结构写的好看点，但愿能帮助到你们

从new Vue开始

我先贴一下我当前的版本号：vue@2.6.11，目录地址：vue\src\core\instance\index.js，这个文件中的代码不是不少，仅仅几行，我也都加上了注释：

那么Ctrl + 左键点击下面的initMixin(Vue)，咱们就能够看到上面this._init(options)的庐山真面目了，那么这里继续以注释的形式进行说明：

到这里都挺好理解的，接下来就是要准备进行挂载DOM，但在挂载前须要生成虚拟DOM，你们应该知道为何须要虚拟DOM，不过我这里仍是写一下，以防本身之后忘记了：每一个DOM元素上有很是多的属性，若是每次对DOM进行操做，那么浏览器就须要反复的操做DOM，也就至关于操做这么多的属性，丢一张图让你们感觉一下，每一个DOM元素的属性是何其的恐怖如斯

而虚拟DOM只须要实现必要的属性便可，再配合diff算法，从而高效的更新页面。

回到刚才的$mount，它的目录是：vue\src\platforms\web\runtime\index.js

mountComponent

这个函数很是重要，它负责挂载组件：

走到这里，最重要的mount阶段就走完了，辛苦看到这里的朋友！因此我要放一波美图，让你们缓缓眼睛：

总结一

经过以上的内容，咱们知道了几个常见面试题的答案：

• 不能在beforeCreate的时候发起网络请求，由于没法存入data，因此也没法双向数据绑定，可是created钩子能够
• 只能在mounted生命周期中访问DOM，由于mountComponent函数在beforeMount钩子后、mounted前调用
• Vue中一个组件对应一个Watcher，从Watcher代理执行updateComponent方法就能够看出，一个Watcher代替执行一个updateComponent方法

接下来看看，Vue 2.X数据驱动视图的原理，咱们得回到initState中initData的那段

接着咱们就被带领到了observe函数中，它又会调用Observer构造函数，它会对传入的数值进行判断，数组特殊处理：

咱们重点看this.walk方法吧：

简化以后的代码以下：

后续另开一篇关于数据响应式处理的文章，由于有太多能够深究的点了~

总结二

经过上面的代码咱们了解到Vue对数据的处理，细节部分后续结合面试题来写，这样你们应该看的会更加起劲

在new Vue后，代码执行到initState，接着触发initData，最后调用Observer构造函数进行数据绑定，其中会对数组进行特殊处理。经过Object.defineProperty递归遍历，在遍历的过程当中收集依赖，让渲染Watcher和当前的数据关联，直到全部数据被处理完毕。这里还能够继续深究，不过上面已经说啦，后面会结合面试题一块儿来说

最后给你们放一张脑图，不过不是什么大制做，只是对这篇文章的总结，不过会随着文章的不断深刻而丰富

脑图放送

本文使用 mdnice 排版