vue 双向数据绑定的实现原理

在目前市场应用比较火的前端框架中，我个人很喜欢vue，总结了vue的几大特点：（1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化
vue在使用过程中如此便捷就主要源于它的双向数据流，那么它是如何实现的？用简短的代码演示一下vue双向数据绑定的原理便一目了然：

• 用Object的defindProperty方法。基于访问器属性get set实现。

<input type="text" id="a"/>
<span id="b"></span>

//js 模拟实现双向数据绑定效果
let obj = {};
let val = '';
Object.defineProperty(obj,'val',{
  get:function(){ //获取值
    return val
  },
  set:function(newValue){  //设置值
    val = newValue;
    document.getElementById('b').innerHTML = val
  }
})
//监听数据改变的事件
document.addEventListener('keyup',function(e){
  obj.val = e.target.value;
})