vue 数据双向绑定原理

一、首先是vue2.0的双向绑定原理，基于Object.defineProperty实现

et obj = {
  name:''
}

let virtualDom = JSON.parse(JSON.stringify(obj))

Object.defineProperty(obj,"name",{
  get(){
    return virtualDom.name
  },
  set(val){
    virtualDom.name = val
    observer()
  }
})
function observer(){
  spanName.innerHTML = obj.name
  inputName.value = obj.name
}
observer()

inputName.oninput = function(){
  obj.name = this.value
}

setTimeout(() => {
  obj.name = "chad"
}, 1000);

第一种说法
vue2.0的双向绑定首先是深克隆一份data数据，通过Object.defineProperty监听data里面的每个属性，通过get/set方法经行修改改变达到双向绑定数据的操作

---

第二种说法
Vue双向绑定的核心是数据劫持结合发布订阅者模式的方式，通过Object.defineProperty()这个原生的API来劫持各个属性，使用setter，getter方法，在数据变动的时候消息给订阅者，触动相应的监听回调

。

二、vue3.0是通过Es6的Proxy实现

let obj = {}

obj = new Proxy(obj,{
  get(targer,prop){
    return targer[prop]
  },
  set(targer,prop,value){
    targer[prop] = value
    observer()
  }
})

function observer(){
  spanName.innerHTML = obj.name
  inputName.value = obj.name
}
observer()

setTimeout(() => {
  obj.name = "chad"
}, 1000);

inputName.oninput = function(){
  obj.name = this.value
}

vue3.0通过Proxy监听整个对象