Vue2.0/3.0双方向データバインディングの実装原理の詳細説明

<本文>
    名前：
    <span id="名前"></span>
    <br />
    <input type="text" id="入力名" />
  </本文>

 <スクリプト>
      obj = {
          名前：''
      }
      オブジェクト.defineProperty(obj,'name',{
          得る（）{
                return this.name //エラーのデモではこれを使用して無限ループを形成することはできないため、新しい値を準備する必要があることに注意してください},
          set(val){

          }
      })
  </スクリプト>

<スクリプト>
      obj = {
      名前： ""
    };
    newObj = JSON.parse(JSON.stringify(obj));
    Object.defineProperty(obj, "名前", {
      得る（） {
        newObj.name を返します。
      },
      設定(値) {
        if (val === newObj.name) return; // パフォーマンスを最適化するために判断を増やします。新しい値が古い値と同じ場合はそれを返します。異なる場合は、値を再割り当てします。newObj.name = val;
        obServer();
      }
    });
    // 再割り当てメソッド function obServer() {
      spanName.innerHTML = newObj.name; //obj.name の値を取得します。 inputName.value = newObj.name;
    }
    obServer(); // 最初に1回実行 setTimeout(() => {
      obj.name = "大左";
    }, 1000);
  </スクリプト>

inputName.oninput = 関数() {
      obj.name = this.value;
    };

データ（）{
戻る {
オブジェクト:{}
}
}
this.obj.name='XXX' // この操作は、obj の先頭に名前がないため機能しません。そのため、監視は実行されません。これは、上記の 2 番目の項目が原因です。

 <スクリプト>
    obj = {} とします。
    obj = 新しいプロキシ(obj, {
      get(ターゲット、プロパティ) {
        コンソールログ("D");
        ターゲット[prop]を返します。
      },
      set(ターゲット、プロパティ、値) {
        コンソールログ("Z");
        ターゲット[prop] = 値;
      }
    }); //オブジェクト全体を監視するには属性を指定する必要はなく、これはオブジェクト内のすべての属性を監視するのと同じです。したがって、全体のセットを記述するだけです。
  </スクリプト>

 <スクリプト>
    obj = {} とします。
    obj = 新しいプロキシ(obj, {
      get(ターゲット、プロパティ) {
        コンソールログ("D");
        ターゲット[prop]を返します。
      },
      set(ターゲット、プロパティ、値) {
        コンソールログ("Z");
        ターゲット[prop] = 値;
        obServer();
      }
    }); //オブジェクト全体を監視するには属性を指定する必要はなく、これはオブジェクト内のすべての属性を監視するのと同じです。したがって、全体のセットを記述するだけです。
    // 再割り当てメソッド function obServer() {
      spanName.innerHTML = obj.name; //obj.name の値を取得します。 inputName.value = obj.name;
    }
    obServer(); // 最初に1回実行 setTimeout(() => {
      obj.name = "大左";
    }, 1000);
    inputName.oninput = 関数() {
      obj.name = this.value;
    };
  </スクリプト>