vue2雙向綁定 Object.defineProperty()

Object.defineProperty()接收三個(gè)參數(shù)

1. 要操作的對(duì)象 （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
      },
       // 當(dāng)值發(fā)生改變時(shí)，去更新視圖層
      set: function (newval) {
        val = newval
        document.getElementById('text').innerHTML = val
      }
    })
    // 在輸入框輸入內(nèi)容時(shí)被keyup鍵盤類型 觸發(fā)事件監(jiān)聽
    document.getElementById('input').addEventListener('keyup', function (e) {
      obj.prop = e.target.value
    })

vue3雙向綁定 Proxy()

Proxy() 接收兩個(gè)參數(shù)

1. 要操作的對(duì)象 （Object）
2. 配置對(duì)象/描述key的屬性（Object）

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

    let obj = {}
    const proxy = new Proxy(obj, {
      // 接受三個(gè)參數(shù) 目標(biāo)對(duì)象 key value
      get: function (target, prop, value) {
        return value
      },
      // 接受三個(gè)參數(shù) 目標(biāo)對(duì)象 key value
      set: function (target, prop, value) {
        target[prop] = value
        document.getElementById('text').innerHTML = value
      }
    })
    // 輸入框輸入內(nèi)容時(shí) 觸發(fā)事件監(jiān)聽
    document.getElementById('input').addEventListener('input', function (e) {
      proxy.prop = e.target.value
    })