VUE的双向数据绑定原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

具体步骤
第一步：需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步 ：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

---

当数据发生变化的时候（修改数据），就会触发Observer里的set方法，然后就通知Dep函数，然后就到Compile

1）初始化，init的时候 初始化渲染页面视图；

2）将每个指令对应的节点绑定更新函数，添加监听数据的订阅者；

Dep负责维护依赖，而订阅者则来自于compile，一旦有数据变动，则会通过Watcher绑定更新函数，此时Watcher也向Dep中添加了订阅者，一旦Dep接到Observer的通知，它就会再去通知Watcher，Watcher则会调用自身的update()方法，并触发Compile中绑定的回调，更新视图；

---

最后敲黑板：

首先我们为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；

然后在编译的时候在该属性的数组dep中添加订阅者，v-model会添加一个订阅者，{{}}也会，v-bind也会，只要用到该属性的指令理论上都会；

接着为input会添加监听事件，修改值就等于为该属性赋值，则会触发该属性的set方法，在set方法内通知订阅者数组dep，订阅者数组循环调用各订阅者的update方法更新视图。

---

Object.defineProperty()

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
他定义的属性的值不可修改，不可删除，不可枚举，想要修改、删除、枚举，需要开启：writable:true、configurable:true、enumerable:true

参数
obj:必须。目标对象；
prop:必需。需要定义或修改属性的名字；
descriptor:必需。目标属性所拥有得特性（描述符、描述项集合、配置集合）

返回值：传入函数的对象，即第一个参数obj;

function defineProperty() {
  let obj={},
  //obj.defineProperty(obj,"a",{value:1})
  Object.defineProperties(obj,{
    a:{
      value:1,
      configurable:true,//可操作性的，可以删除
      writable:true,//可写，可修改
      enumerable:true,//可枚举，可遍历
    },
    b:{
      value:2
    }
    return obj
  })
}
let _obj = defineProperty()
_obj.a=5
_obj.b=6
console.log(_obj)  //{a:5,b:2}

---

可能遇到的问题：当修改属性的时候，发现视图没有更新
是因为你没有在data中定义，然后初次渲染的时候，你修改的这个属性也就没有setter和getter方法，也就不会数据的双向绑定
解决方法：
1、可以在data中先定义这个属性为空，
2、利用this.$set(obj,修改的属性：属性值)这里属于obj的属性和属性值都要写上