首先是2.0的双向绑定原理，基于Object.defineProperty实现

let 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);
复制代码

2.0的双向绑定首先要深克隆一份data数据，通过Object.defineProperty监听data里面的每个属性，通过get/set方法达到双向绑定数据。

缺陷：需要深度克隆数据、无法实现深度监听，例如监听值为对象时子属性或数组的成员。

3.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
}
复制代码

3.0通过Proxy监听整个对象，现实无须克隆数据，且能够深度监听的效果。