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

版权声明：小苹果的成长笔记 https://blog.csdn.net/weixin_42416812/article/details/88897601

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