Vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Obeject.defineProperty()来劫持各个属性的setter、getter。在数据变动时给订阅者发送消息，触发响应的监听回调。在Vue里面用了 Object.defineProperty 实现了data的 getter/setter 操作，通过 Watcher 来观察数据的变化，进而更新到视图中。
Object.defineProperty
通过此函数实现双向绑定，直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
-
语法：
Object.defineProperty(obj, prop, descriptor) -
参数：
<1>obj：目标对象，要在其上定义属性的对象。
<2>prop：需要添加或者定义的属性名称。
<3>descriptor：属性描述符，目标属性值所拥有的特性 -
返回值：被传递给函数的对象。
-
属性描述符：
<1>数据描述符：具有值的属性，该值可能是可写的，也可能不是可写的。
拥有的可选键值：
configurable：可配置的
表示对象的属性是否可以被删除，以及除writable特性外的其他特性是否可以被修改。默认为 false。
enumerable: 可列举的
当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。
value
该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
writable
当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。设置为false时，该属性被称为“不可写”，也就是不能改变它的值。<2>存取描述符：由getter-setter函数对描述的属性。
拥有的可选键值：
configurable：可配置的
enumerable: 可列举的
get：
一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。默认为 undefined。
set：
一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为 undefined。
注意点：描述符必须是这两种形式之一；不能同时是两者。
如果一个描述符不具有value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。 -
例子：
var o = {
}; // 创建一个新对象
// 在对象中添加一个属性与数据描述符的示例
Object.defineProperty(o, "a", {
value : 37,
writable : true,
enumerable : true,
configurable : true
});
// 对象o拥有了属性a，值为37
// 在对象中添加一个属性与存取描述符的示例
var bValue;
Object.defineProperty(o, "b", {
get : function(){
return bValue;
},
set : function(newValue){
bValue = newValue;
},
enumerable : true,
configurable : true
});
o.b = 38;
// 对象o拥有了属性b，值为38
// o.b的值现在总是与bValue相同，除非重新定义o.b
// 数据描述符和存取描述符不能混合使用，否则抛出错误
Object.defineProperty(o, "conflict", {
value: 0x9f91102,
get: function() {
return 0xdeadbeef;
}
});
// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors
发布者-订阅者
订阅者就是把要执行的函数和要的事件类型给消息存放的地方(Listener:调度中心)，而发布者就是告诉消息存放的地方(Listener:调度中心)你现在可以执行这个事件类型对应的函数了，并且把我给你的数据也传进去。
执行过程
- 在 Vue 中模板编译过程中的指令或者数据绑定都会实例化一个 Watcher 实例，实例化过程中会触发 get() 将自身指向 Dep.target;
- data在 Observer 时执行 getter 会触发 dep.depend() 进行依赖收集；依赖收集的结果：
①data在 Observer 时闭包的dep实例的subs添加观察它的 Watcher 实例；
②Watcher 的deps中添加观察对象 Observer 时的闭包dep； - 当data中被 Observer 的某个对象值变化后，触发subs中观察它的watcher执行 update() 方法，最后实际上是调用watcher的回调函数cb，进而更新视图。
Observer类
Observer类是将每个目标对象（即data）的键值转换成getter/setter形式，用于进行依赖收集以及调度更新。
在getter时，dep会收集相关依赖，即收集依赖的watcher，然后在setter操作时候通过dep去通知watcher,此时watcher就执行变化
getter方法：
- 先为每个data声明一个 Dep 实例对象，被用于getter时执行dep.depend()进行收集相关的依赖;
- 根据Dep.target来判断是否收集依赖，还是普通取值。
setter方法：
- 获取新的值并且进行observe，保证数据响应式；
- 通过dep对象通知所有观察者去更新数据，从而达到响应式效果。
Watcher
Watcher是一个观察者对象。依赖收集以后Watcher对象会被保存在Dep的subs中，数据变动的时候Dep会通知Watcher实例，然后由Watcher实例回调cb进行视图的更新。
Dep
被Observer的data在触发 getter 时，Dep 就会收集依赖的 Watcher ，在data变动时，就会通过 Dep 给 Watcher 发通知进行更新。
例子
<template>
<div>
// 实例化一个watcher实例，也就是这里的message
<input v-model="message">
<span>{
{
message }}</span>
</div>
</template>
<script>
export default {
// 触发observer类，为message键值转换成getter/setter形式，并且声明Dep实例对象
data () {
return {
message: '1'
}
}
}
</script>