vue2 与 vue3双向数据绑定的理解

vue2 双向数据绑定原理是通过Object.definedProperty()实行数据劫持，结合observer() 观察者，来实现

<div>
    姓名：<span id="spanName"></span>
  </div>
  <input id="inputName" type="text">

<script>
  let obj={name: ''}
  // 深拷贝obj  防止在get()里return obj.name 时死循环
  let newObj = JSON.parse(JSON.stringify(obj))
  Object.defineProperty(obj, 'name', {
    get(){
      // console.log('获取')
      return newObj.name
    },
    set(val){
      // console.log('设置')
      // 这次的值如果和之前的一样，就不往下操作了
      if(val === newObj.name) return
      newObj.name = val
      observer()
    }
  })
  function observer(){
    spanName.innerHTML = obj.name
    inputName.value = obj.name
  }
  setTimeout(()=> {
    obj.name = 'hhhh'
  },3000)
  inputName.oninput = function (){
    obj.name = this.value
  }

  // tip: 1.需要对原始数据进行克隆
  //      2.需要监听对象中的每一个属性
</script>

vue3 是通过3.0新增的Proxy 来实现

 // vue3.0
  let obj={ }
  // Proxy 可以监听对象中的所有属性
  obj = new Proxy(obj, {
    get(target,prop){
      return target[prop]
    },
    set(target,prop,value){
      target[prop] = value
      observer()
    }
  })

  function observer(){
    spanName.innerHTML = obj.name
    inputName.value = obj.name
  }
  setTimeout(()=> {
    obj.name = 'hhhh'
  },3000)
  inputName.oninput = function (){
    obj.name = this.value
  }

B站看别人视频学到的