Vue2的响应式原理是通过劫持数据的变化来更新视图，同样当视图发生变化的时候通过回调更新数据。在Vue2中它使用了Object.defineProperty()为所有的响应式变量定义了setter和getter方法，这里我们可以先简单理解为响应式变量就是data中定义的变量。
在data初始化结束后，即为所有的变量设置了setter和getter方法后，视图（template）在初始化时如果访问了data中的某个属性就会触发该属性的getter方法，getter方法会创建一个观察者watcher并存储起来。当这个属性的值发生变化时会被setter劫持到，setter会通知所有和这个属性相关的watcher去更新各自部分的视图。
我们能想到，除了视图，计算属性也是同样的原理。假设有一个计算属性fullName是firstName和lastName相连，计算属性首次计算时会创建两个观察者分别观察firstName和lastName的变化，当firstName或者lastName发生变化时，这个值的setter属性被触发，进而通知对应的watcher重新计算fullName的值。计算属性就是一个和data中属性一样的属性，他即观察了别的data或计算属性，同时也可以被别的计算属性和视图观察。套娃。
watch就更简单了，直接生成一个对应data或计算属性的watcher，当数据变化时执行watcher的回调就好了。区别仅在于watcher的回调不一样。视图初始化是创建的watcher的回调是更新视图。watch创建的watcher的回调就是你写的那个函数，执行就好了。
首先我们实现了一个Observer观察者，通过Object.defineProperty()我们现在可以在对象的属性发生变化时监听到变化了。 有观察者就要有订阅者，一个属性只需要设置一次观察者，它的值发生变化时就能发出通知。但是一个属性可能被多方同时观察，因此我们需要有一个地方管理这些观察。因为我们需要定义一个Dep的对象用来收集说有的观察。