vue原理之双向绑定虚

vue 双向绑定的原理：数据劫持结合发布者-订阅者模式

举例说明：

在vue中创建数据对象

    var vm = new Vue({
        data: {
            obj: {
                test: 1
            }
        },
        created: function () {
            console.log(this.obj);
        }
    });

结果：

　　Object {

　　　　test: 1

　　　　_ob_: Observer

　　　　get test: function reactiveGetter()

　　　　set test: function reactiveSetter(newVal)

　　　　_proto_: Object

　　}

我们会发现其中多了些东西比如说get和set，那么他们是what？

vue通过object.defineProperty这个函数来进行数据劫持，这个函数可以控制一个对象的一些属性，读写啊之类的       

例如

　  let Obj = {};

      let pro = '';

　   Object.defineProperty(Obj, 'pro', {

          set(value) {

              pro = value

　　　　console.log('变量值设定为‘ + value)

          }，

          get(value) {

              return ’获取到的变量值为：‘ +  pro

          }

      })

     Obj.pro = 'vue';  // 变量值设定为vue
     console.log(Obj.pro);  //获取到的变量值为vue

     在设置Obj.pro的值时会触发set函数，在读取Obj.pro的值时会触发get函数

双向绑定：视图变化时更新数据，可以使用事件监听，比如input事件啊，click事件啊等

                  数据变化时更新视图，使用Object.defineProperty中定义的set函数，数据变化时执行set函数，在数据双向绑定时先对数据进行劫持监听，所以有一个Observe监听器，监听           数据的所有属性，属性变化时告诉订阅者Watcher看是否需要更新，因为订阅者是多个，所以需要消息订阅器Dep来收集订阅者，然后在监听器Observer和订阅者Watcher之间进           行统一管理，接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函           数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定

       　　　1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

       　　　2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

       　　　3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器