VUE 2.0 碎碎念

前言

一个多月前，抽空看了一下 Vue 2.0 的源码，看源码最好的方式还是先搜下相关文章，把握整体脉络之后，再看一些细节。先列一下我看源码时候参考的一些文章：

• Vue原理解析之Virtual Dom
• Vue2.1.7源码学习
• vue源码解析系列

这几篇文章都写得很好，但也有一些缺点。其中《vue源码解析系列》虽然讲得比较深入，但想要读懂，必须对源码有一定了解；而其他两篇文章虽然易懂，但是又不够深入。

所以我又参照了 Vue 源码，实现了一个简易的 miniVue。

原本计划在这个基础上，写一篇《一步步实现 miniVue》的文章，但是后来因为工作忙的原因，一直没有动笔。

所以现在先写一篇碎碎念，记下一些 Vue 设计上的黑魔法，以及个人对 Vue 2.0 代码的一些观点，算是一篇草稿吧。

正文

1. Vue 设计上用了许多黑魔法，其中最广为人知的就是利用 JavaScript 中的 getter，setter 实现一套双向绑定机制。虽然这一套机制非常精巧，但是这种对原生语言的 hack 也导致了代码的不容易理解。比如对一个对象的访问，可能也会导致 watcher.addDep 的触发，而这是在代码层面上很难察觉的，而这种地方，也很容易引入 bug。
2. 但还是不得不说，Observer-Watcher 中的代码，是 Vue 里面写得最漂亮的代码之一(另一个是 patch)。其中 watcher 里面，利用 deps，newDeps 两个数组，实现了 update Deps 的功能，具体的代码在 Watcher.addDep 中。虽然只有几行代码，但是却使用了垃圾回收的原理，非常优雅。
3. Patch 是 Vue 实现虚拟 DOM 的一个重要部分，如果有看过源码注释的话，就会发现这个 patch 实际上是基于另一个项目修改而来的。Patch 里面的 updateChildren 是最重要的函数，巧妙且大胆地动态去修改 Vnode数组(同时也修改了 Vnode)，从而让 diff 和 patch 同时完成。相比之下，React 的实现就没有那么巧妙了，只是简单地用了最基本的 diff 套路，对 vNode 进行静态分析(当然这只是很久之前我所看到的 React 版本，可能现在已经改变了实现方式)。
4. 在阅读 React 和 Vue 的源码时，都需要分清一个比较容易混淆的概念，那就是 Component 和 componentInstance，这两者之间的关系就和面向对象中的 Class 和 Object 的关系类似。Vue 的 Component机制原理上和 React 是一样的。其中在 Vue 中，Vue.component 实际上是 Vue 的一个子类，这也算是一个设计比较巧妙的地方吧，不过也是情理之中。
5. computed 的实现算是把 Observer-Watcher 用到了极致，其中的关键在于理解 createComputedGetter 函数，通过 watcher.depend() 将绑定在 watcher 中的 deps 都绑定到 Dep.target 中。虽然代码量很少，但是这段代码依然很难理解，这也算是检验是否真正理解 Observer-Watcher 机制的一个判断方法吧。