Vue源码解析第一篇 Vue双向绑定原理

Vue 学习路线

1、变化侦测篇

学习Vue中如何实现数据的响应式系统，从而达到数据驱动视图。

数据驱动视图：简单来说就是数据变化引起视图变化。
变化侦测：就是追踪状态，或者说是数据的变化，一旦发生变化，就去更新视图。

---

angular中，一旦发生了可能引起数据变化的时候就会自根向下，进行检查（树的深度遍历，脏检查）。

脏检查：存储所有变量的值，当可能有变量变化需要检查时，就将所有变量的旧值跟新值进行比较，不相等就说明检测到变化，需要更新对应的视图。

React中，通过对比虚拟DOM来实现变化侦测。

Vue中，提供了Object.defineProperty方法，可以轻松的知道数据在什么时候发生了变化，使数据变得“可观测”。
(具体可以看源码：src/core/observer/index.js)
Object.defineProperty设置对象的key属性，使得能够捕获到该属性得get/set动作。一般由Watcher的实例对象进行get操作，此时Water的实例对象将被自动的添加到Dep实例的依赖数组中，在外部操作触发set时，将通过Dep实例的notify来通知所有依赖的watcher进行更新。【依赖数组，即：数据变化了，使用了这个数据的集合。当数据变化时，我们就去它对应的依赖数组中，把每个依赖都通知一遍，提示该更新了，这个过程就是依赖收集。getter中收集依赖，setter中通知依赖更新】
依赖管理器：Dep 。Dep是Observer与Watcher之间的纽带，也可以认为Dep是服务于Observer的订阅系统。Watcher订阅某个Observer的Dep，当Observer观察的数据发生变化时，通过Dep通知各个已经订阅的Watcher。
Watcher：用来订阅数据的变化的并执行相应操作（例如更新视图）。在创建Watcher实例的过程中会自动的把自己添加到这个数据对应的依赖管理器中，以后这个Watcher实例就代表这个依赖，当数据变化时，我们就通知Watcher实例，由Watcher实例再去通知真正的依赖。

数组的变化侦测：源码（src/core/observer/array.js）Array不能使用Object.defineProperty方法。Array型数据还是在getter中收集依赖。利用数组的一些改变自身数组的方法创建一个数组方法拦截器，使得Array型数据变得可观测。即数组变化侦测是通过拦截器实现的。
Vue.set和Vue.delete 解决修改对象和通过下标修改数组无法侦测的问题。

下一章讲Vue中的虚拟DOM