vue数据双向绑定的原理

说到vue的双向绑定原理，就不得不提到对象的一个API
Object.defineProperty（）
作用：就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

Object.defineProperty(obj, prop, desc)

1.obj 需要定义属性的当前对象
2.prop 当前需要定义的属性名
3.desc 属性描述符

 let data ={
          a:10
      }
      Object.defineProperty(data,'a',{
         set(val){
           console.log('设置a的值');
         },
         get(){
             console.log('获取a的值');
         }
      })
      data.a=100
      console.log(data.a);

其中set 在你对数据进行赋值的时候触发，get在你使用值的时候触发

但是我们发现在这里打印a的值是undefined，在get 方法里return 发现会递归

怎么解决这个问题呢？
声明一个中间变量就可以解决这个问题

 let data ={
          a:10
      }
      let $data ={
          a:''
      }
      Object.defineProperty(data,'a',{
         set(val){
           console.log('设置a的值');
             $data.a=val
         },
         get(){
            //  console.log('获取a的值');
             return $data.a
         }
      })
      data.a=100
      console.log(data.a);

下面我们可以简单模拟下数据双向绑定

 <input type="text" name="" id="myInp">
    <p id="myp"></p>
    <script>
      let myInp =document.querySelector('#myInp')
      let myp =document.querySelector('#myp')
      let data ={
          a:10
      }
      let $data ={
          a:''
      }
      Object.defineProperty(data,'a',{
         set(val){
           console.log('设置a的值');
             $data.a=val
             myInp.value=val
             myp.innerHTML=val
         },
         get(){
            //  console.log('获取a的值');
             return $data.a
         }
      })
      data.a=100
      console.log(data.a);
      //给输入框绑定input事件
        myInp.oninput=function(e){
        data.a =  e.target.value
      }
    </script>