【JavaScript专题】简单实现双向绑定的方法（object.definedProperty）【面试必问！！】

本文主要讲述的是vue里面有个v-model双向绑定，那么双向绑定利用javascript源码是如何实现的。

    <div>
        <input id="Input" type="text" >
        <p id="p"></p>
    </div>
    <script>
    //实现简单的双向绑定
    var obj = {}
    var p = document.getElementById("p")
    
    //该方法的第一个参数为对象的名称，
    //第二个参数所要定义的属性名称，
    //第三个就是装着对属性value进行set和get的方法。
    
    Object.defineProperty(obj,'message',{
      set:function(val){
        //val值传进来后，把它赋值给p的text即可。
        p.innerText = val
      },
      get:function(){
        return val
      }
    })
    document.getElementById("Input").addEventListener("input",function(e){
      //以下的式子就是为了触发obj里面的set函数。把e.target.value的值传进val。
      obj.message = e.target.value
    })
  </script>

以上就是双向绑定的简单实现过程，希望各位大佬有其他更好的想法可以在下方评论留言，谢谢各位啦。