Vue2数据双向绑定

一、核心函数：Object.defineProperty

二、具体实现步骤

1. 定义数据

2. 实现数据的渲染

3. 当视图改变，数据改变

4. 当数据改变驱动视图更新

      <input type="text">
      <script>
        // 1\定义数据
        let data={
          value:'hello'
        }
   
        // 2\获取到input输入框，并给输入框赋初始值
        document.querySelector('input').value = data.value
   
        // 3\使用input输入框的input输入事件，实现输入框数据改变时，data数据同步改变
        document.querySelector('input').addEventListener('input',(e)=>{
          data.value = e.target.value
        })
   
        // 5\使用Object.definePropertyAPI,实现数据改变时,input输入框数据同步改变
        // 参数1:Object.defineProperty的第一个参数
        // 参数2:Object.defineProperty的第二个参数
        // 参数3:用于获取到set中的val(数据改变时的数据)
        // 参数4:是一个函数,用于在数据改变时,同步到输入框
        function defineReactive(obj,prop,value,cd){
          Object.defineProperty(obj,prop,{
            get(){
              // 允许数据发生修改
              return value
            },
            set(val){
              console.log('数据发生修改了:',val)
              //  将数据修改之后的值val在get中返回
              value = val
              cd(val)
            }
          })
        }
   
        // 4\将数据修改后的值,同步到input输入框
        function updata(data){
          document.querySelector('input').value = data
        }
   
        // 6\调用defineReactive函数
        defineReactive(data,'value',data['value'],updata)
      </script>