vue如何实现双向数据绑定？

vue的双向绑定原理几乎是面试中都会问到的一个话题~

面试官：说一下VUE双向绑定的原理？

答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。（大家可以自己手写下，加深自己的理解~）

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

<input type="text" id="userName"/>
<br/>
<span id="uName"></span>

<script>
    var obj={

};
Object.defineProperty(obj,"userName",{
  get:function(){
    console.log("get init")
  },
  set:function(val){
    console.log("set init");
    document.getElementById("uName").innerText=val;
    document.getElementById("userName").value=val;
  }
});
document.getElementById("userName").addEventListener("keyup",function(event){
  obj.userName=event.target.value;
})
</script>

长按二维码，即可关注

https://blog.csdn.net/longzhoufeng/article/details/80987527