关于Vue2的双向数据绑定以及 响应式原理 的理解

  1. 双向数据绑定 ：
      vue的数据双向绑定，将mvvm 作为数据绑定的入口，整合 Observer, Complie 和watcher 三者，通过Observer 来监听自己的model 的 数据变化， 
      通过Compile 来解析编译模板指令（vue 中是用来解析{{}}）最终利用 watcher 搭起 Observer 和Compile 之间的通信桥梁，
      达到数据变化-》 视图更新-》;视图变化（input）->数据model 变更双向绑定 
        <input id='app' />
        <span id='spanVal'> </span>
        var obj = {}
        var initVal = 'aaa';
        Object.defineProperty(obj,initVal,{
            get(){
              console.log('获取obj的最新值')
              return initVal
            },
            set(val){
                  initVal = val;
                  console.log('设置最新的值')
                  document.getElementById('initVal').text(initVal)
            }
        })
        document.addEventListener('keyup',function(e){
            obj.initVal = e.target.value; // 监听获取文本框输入的值
        }) 
    2. 响应式原理 ： 
        vue 在初始化数据时，会对数据进行递归遍历，把每个属性都转换成get 和set 通过 Object.defineProperty () 方法实现数据劫持  
        他可以接收三个参数 第一个参数 要操作的对象，第二个参数 要定义或修改的对象属性名 第三个 描述对象，
        当数据变化时，会触发setter，setter会通知所有订阅者，订阅者就会更新页面视图，从而实现了数据双向绑定