v-model原理及实现

vue复习笔记——v-model原理及实现

v-model实现数据的双向绑定

<div>
           <label for="">使用v-model：</label>
           <input type="text" v-model="data1">
           {{data1}}
        </div>

使用原生js实现v-model

• defineProperty实现

  使用defineProperty对数据进行劫持

  监听input输入事件

  <div>
          <label for="">js中defineProperty实现：</label>
         <input type="text" id="input2">
         <p id="data2"></p>
      </div>  
      
      <script>
          const input2 = document.getElementById("input2")
          const data2 = document.getElementById("data2")
          const obj = {}
          Object.defineProperty(obj,"data",{
              // value:"",//默认值
              // writable:true,//可写,如果设置了value，writable，再设get会报错
              enumerable:true,//可遍历
              configurable:true,//可删
              set(value){
                  data2.innerText = value
                  input2.value = value
              },
              get(){
                  return obj
              }
          }) 
          input2.addEventListener("input",(event)=>{
              obj.data = event.target.value
          })
          obj.data = input2.value//
      </script>
  

• proxy实现

<div>
        <label for="">js中Proxy实现：</label>
       <input type="text" id="input3">
       <p id="data3"></p>
    </div>  
    <script>
        const input3 = document.getElementById("input3")
        const data3 = document.getElementById("data3")
        const obj3 = {
            data:""
        }
        const proxy = new Proxy(obj3,{
            set(target,attr,value){
                console.log(attr)
                if(attr==="data"){
                    data3.innerText = value
                }
                Reflect.set(target,attr,value)
            },
            get(target,attr){
                Reflect.get(target,attr)
            }
        })
        input3.addEventListener("input",(event)=>{
            proxy.data = event.target.value
        })
        proxy.data = input3.value
    </script>

使用v-bind和v-on实现

<div>
            <label for="">使用vue实现：</label>
            <input type="text" :value="data4" @input="data4=$event.target.value">
            {{data4}}
         </div>

如有错误和补充，请告知。谢谢你的浏览，希望你我都能有所收获。