上一讲，我们讲Vue和React异同的时候，讲到Vue是响应式的，那么这个响应式到底具体是什么样的？这一讲，我们来仔细看看这个话题。
简单点来说，就是在Vue的数据变量值变化时，变化可以同步到视图；在视图值变化时，视图的值变化可以同步到Vue的数据变量（注意：这里的数据变量是指Vue实例的data属性中的返回值对象的属性，视图值是指表单元素的输入值变化）。
我们又把满足前半句的叫单向数据绑定（即数据到视图的绑定），把满足前半句和后半句的叫双向数据绑定（即数据到视图的绑定和视图到数据的绑定）。那么这两个绑定是如何实现的呢？或者说这两个数据绑定的实现原理是什么？
其其实也很简单。前半句的实现是采用了一个叫观察者模式的设计方法来实现的，后半句是直接采用js自带是事件机制来实现的。下面我们来分别阐述下这两个实现。
1.通过事件机制来实现：即通过对视图上来自用户的输入进行监听，在监听到新的数据变化时将其更新到Vue实例的返回值对象的属性上，这就实现了视图到数据的绑定。待用户真正输入数据时，就会触发视图到数据的更新。是不是很简单？嗯....反正我觉得是很简单。
2.通过观察者模式来实现：即主要通过两个对象来实现，观察者对象和目标对象。由于这个实现过程比较负责，我们先简述下这两个对象的方法和属性，后面再将这两个对象的方法和属性的调用纳入Vue整个编译观察过程来综述下。
(1)对象简述：
观察者对象：目标对象有一个更新方法。其用来在获得目标对象变化时，更新变化。
目标对象：目标对象有一个通知方法及一个数组变量属性。数组变量属性用来存储所有观察该目标对象的观察者对象；通知方法用来通知所有观察者。
(2)纳入Vue整个编译观察过程综述：
上面我们看完了这两个对象的属性和方法。然后我们来具体描述下这个过程在Vue运行过程中的调用。我们知道，我们在写Vue的时候会写一些包含data、mounted、method、el等等属性的配置对象给Vue构造器，这样Vue构造器会在Vue实例化的时候，先根据我们传给它的data属性，利用Object对象的defineProperty方法对其data对象进行递归监听每一个属性的改变和调用。这里每个属性即是我们上面说的目标对象，在这个属性值被改变时，其会调用它的通知方法，通知对它进行观察的观察列表里面的所有观察者。然后在Vue对data属性的进行递归监听完成以后，再对传给它的模板进行编译，在编译时碰到的双括号、指令时，Vue会把其解析成一个个观察者，然后将其存储到观察的相应目标属性的观察列表中，这样就完成了数据到视图的绑定。最后，待我们调用方法对目标属性进行更改时，目标对象通知自己观察者列表里面的所有观察者更新它们的视图，这就完成了数据到视图的更新。
至此，我们就介绍完了Vue的双向绑定或者叫数据响应。是不是很简单？