前言
Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象，而当你修改它们时，视图会进行更新，这使得状态管理非常简单直接，我们可以只关注数据本身，而不用手动处理数据到视图的渲染，避免了繁琐的 DOM 操作，提高了开发效率。
vue 的响应式系统依赖于三个重要的类：Dep 类、Watcher 类、Observer 类，然后使用发布订阅模式的思想将他们揉合在一起
Observe（发布者）
Observe扮演的角色是发布者，他的主要作用是调用defineReactive函数，在defineReactive函数中使用 Object.defineProperty 方法对对象的每一个子属性进行数据劫持/监听。
代码展示
defineReactive函数，Observe的核心，劫持数据，在setter中向Dep（调度中心）添加观察者，在getter中通知观察者更新。
Watcher（订阅者）
Watcher扮演的角色是订阅者/观察者，他的主要作用是为观察属性提供回调函数以及收集依赖（如计算属性computed，vue会把该属性所依赖数据的dep添加到自身的deps中），当被观察的值发生变化时，会接收到来自dep的通知，从而触发回调函数。
代码展示：
Watcher类的实现比较复杂，因为他的实例分为渲染 watcher（render-watcher）、计算属性 watcher（computed-watcher）、侦听器 watcher（normal-watcher）三种，这三个实例分别是在三个函数中构建的：mountComponent 、initComputed和Vue.prototype.$watch。
normal-watcher：我们在组件钩子函数watch 中定义的，都属于这种类型，即只要监听的属性改变了，都会触发定义好的回调函数，这类watch的expression是我们写的回调函数的字符串形式。
computed-watcher：我们在组件钩子函数computed中定义的，都属于这种类型，每一个 computed 属性，最后都会生成一个对应的 watcher 对象，但是这类 watcher 有个特点：当计算属性依赖于其他数据时，属性并不会立即重新计算，只有之后其他地方需要读取属性的时候，它才会真正计算，即具备 lazy（懒计算）特性。这类watch的expression是计算属性中的属性名。
render-watcher：每一个组件都会有一个 render-watcher, 当 data/computed 中的属性改变的时候，会调用该 render-watcher 来更新组件的视图。这类watch的expression是 function () {vm._update(vm._render(), hydrating);}。
除了功能上的区别，这三种 watcher 也有固定的执行顺序，分别是：computed-render -> normal-watcher -> render-watcher。
这样安排是有原因的，这样就能尽可能的保证，在更新组件视图的时候，computed 属性已经是最新值了，如果 render-watcher 排在 computed-render 前面，就会导致页面更新的时候 computed 值为旧数据。
这里我们只看其中一部分代码：
Dep（调度中心）
Dep 扮演的角色是调度中心/订阅器，主要的作用就是收集观察者Watcher和通知观察者目标更新。每个属性拥有自己的消息订阅器dep，用于存放所有订阅了该属性的观察者对象，当数据发生改变时，会遍历观察者列表（dep.subs），通知所有的watch，让订阅者执行自己的update逻辑。
代码展示：
Dep的设计比较简单，就是收集依赖，通知观察者
总结：
Observe是对数据进行监听，Dep是一个订阅器，每一个被监听的数据都有一个Dep实例，Dep实例里面存放了N多个订阅者（观察者）对象watcher。
被监听的数据进行取值操作时（getter），如果存在Dep.target（某一个观察者），则说明这个观察者是依赖该数据的（如计算属性中，计算某一属性会用到其他已经被监听的数据，就说该属性依赖于其他属性，会对其他属性进行取值），就会把这个观察者添加到该数据的订阅器subs里面，留待后面数据变更时通知（会先通过观察者id判断订阅器中是否已经存在该观察者），同时该观察者也会把该数据的订阅器dep添加到自身deps中，方便其他地方使用。
被监听的数据进行赋值操作时（setter）时，就会触发dep.notify()，循环该数据订阅器中的观察者，进行更新操作。
