vue2与vue3的双向绑定原理

vue2双向绑定 Object.defineProperty()

Object.defineProperty()接收三个参数

1. 要操作的对象 （Object）
2. 要修改或定义的key（String）
3. 描述key的属性（Object）

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

    let obj = {}
    // 重写get和set
    Object.defineProperty(obj, 'prop', {
      get: function () {
        return val
      },
       // 当值发生改变时，去更新视图层
      set: function (newval) {
        val = newval
        document.getElementById('text').innerHTML = val
      }
    })
    // 在输入框输入内容时被keyup键盘类型 触发事件监听
    document.getElementById('input').addEventListener('keyup', function (e) {
      obj.prop = e.target.value
    })

vue3双向绑定 Proxy()

Proxy() 接收两个参数

1. 要操作的对象 （Object）
2. 配置对象/描述key的属性（Object）

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

    let obj = {}
    const proxy = new Proxy(obj, {
      // 接受三个参数 目标对象 key value
      get: function (target, prop, value) {
        return value
      },
      // 接受三个参数 目标对象 key value
      set: function (target, prop, value) {
        target[prop] = value
        document.getElementById('text').innerHTML = value
      }
    })
    // 输入框输入内容时 触发事件监听
    document.getElementById('input').addEventListener('input', function (e) {
      proxy.prop = e.target.value
    })