数据双向绑定_双向数据绑定原理

vm的核心是view和data

当data发生变化的时候，他是通过object.defineProperty()方法中的set方法进行监控。

并调用此前已经定义好的data和view的关系了回调函数，来通知view进行数据改变。

而view发生变化的时候则是通过底层的input事件来进行data的响应事件。

总结

data发生变化的时候是通过object.defineProperty()方法中的set方法进行监控。

view发生变化是通过底层的input事件来进行data的响应事件。

双向数据绑定的实现原理

用到input事件，以及es5的object.definePropety()事件。

问题-->怎么知道数据发生变化

如在angular中使用的是脏检查机制，用定时器进行轮询。缺点是，性能比较低，可以兼容到ie8

则在vue中使用的是数据劫持机制。使用到es5中的object.definePropety();

使用数据劫持机制实现数据双向绑定关键代码

<p></p>
<input type='text'>
<script>
    let p = document.querySelector('p');
    let inp = document.querySelector('input');
    let obj = {
        msg:'hello',
    }
    p.innnerHTML = obj.msg;
    inp.value = obj.msg;
    //实现视图变化数据跟着变化
    inp.oninput = function(){
        obj.msg = inp.value
    }
    //实现数据跟着视图变化
    let temp = obj.msg;
    object.defineProperty(obj,'msg',{
    //get方法会劫持msg这个属性的获取操作
    get(){
      return temp
    }
   //set方法会劫持msg这个属性的设置操作
   set(value){
      temp = value;
      p.innerHTML= temp;
      inp.value = temp;
   }
  })
</script>