v3_71
/
双向数据绑定原理.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p id="oP"></p>
  <input id="oInput" type="text">
  <script>
    // 需求：双向数据绑定（数据变了，视图改变；视图改变，数据也变）

    const data = {
      name: 'ifer',
      address: '北京',
    };

    /* const tempData = { ...data }
    Object.keys(data).forEach(key => {
      Object.defineProperty(data, key, {
        get() {
          return tempData[key]
        },
        set(newValue) {
          tempData[key] = newValue
          oP.innerHTML = newValue
          oInput.value = newValue
        }
      })
    })
    oInput.oninput = function (e) {
      data.address = e.target.value
    } */

    // 上面 Vue2 的问题：如果 data 里面有 100 个属性，那可不是要循环 100 次吗？

    // p 就是一个代理，我对 p 的任何操作都会影响到 data
    const p = new Proxy(data, {
      get(target, attr) {
        // 获取的时候触发
        // console.log(target, attr)
        // target => data
        // attr => 属性
        return target[attr]
      },
      set(target, attr, newValue) {
        target[attr] = newValue
        oP.innerHTML = newValue
        oInput.value = newValue
      }
    })
    // p.name = 'xxx'
    // console.log(data.name);

    /* p.name = 'xxx'
    console.log(p.name) */

    oInput.oninput = function (e) {
      // p.address = e.target.value
      p.test = e.target.value
    };
  </script>
</body>

</html>