VUE中v-model数据双向绑定原理

VUE中v-model数据双向绑定原理

html

<p id="p"></p>
<input type="text" id="input">

VUE2x

let obj ={}
//利用Object的defineProperty方法去监听对象属性的变化  第一个参数为目标对象  第二个参数是对象属性
Object.defineProperty(obj,'txt',{
  get(){
    return obj
  },
  set(value){
    //将p标签和input里面的内容改成value
    document.querySelector('#p').innerHTML = value
    document.querySelector('#input').value = value
  }
})
obj.txt = 'ssr'
document.querySelector('#input').addEventListener('keyup',e=>{
  obj.txt = document.querySelector('#input').value
})

VUE3x

//由于Object的defineProperty会将原来的obj也改变  所以VUE3x利用Proxy来进行数据的双向绑定
let obj={}
let proObj = new Proxy(obj,{
  get(){
    return this
  },
  set(target,key,value){
    document.querySelector('#p').innerHTML = value
    document.querySelector('#input').value = value
  }
})
proObj.txt = 'ssr'
document.querySelector('#input').addEventListener('keyup',e=>{
  proObj.txt = document.querySelector('#input').value
})