Vueデータ双方向バインディング実装方法

<div id="アプリ">
  <h1 v-text="メッセージ"></h1>
  <input type="text" v-model="msg">
  <div>
    <h1 v-text="msg2"></h1>
    <input type="text" v-model="msg2">
  </div>
</div>

vm = new Vue({
    el: "#app",
    データ： {
      メッセージ: "こんにちは世界",
      メッセージ2: 「こんにちは、シャオフェイ」
    }
  })

クラスVue {
    // 渡されたオブジェクトを受け取るconstructor(options) {
      // 有効な情報を保存します this.$el = document.querySelector(options.el);
      this.$data = オプション.data;

      //コンテナー: {属性 1: [wathcer1、wathcer2...]、属性 2: [...]}、各属性オブザーバーを格納するために使用されます this.$watcher = {};

      // 要素の解析: コンパイルの実装
      this.compile(this.$el); // 要素を解析するには、要素を渡す必要があります // データのハイジャック: Observer の実装
      this.observe(this.$data); // データをハイジャックするには、データを渡す必要があります}
    コンパイル() {}
    観察する（） {}
  }

クラスVue {
    // 渡されたオブジェクトを受け取るconstructor(options) {
      // 役に立つ情報を取得します this.$el = document.querySelector(options.el);
      this.$data = オプション.data;

      // コンテナ: {attribute1: [wathcer1, wathcer2...], attribute2: [...]}
      this.$watcher = {};

      // 2. 要素の解析: コンパイルの実装
      this.compile(this.$el); // 要素を解析するには、要素を渡す必要があります // 3. データのハイジャック: Observer の実装
      this.observe(this.$data); // データをハイジャックするには、データを渡す必要があります}
    コンパイル(el) {
      // 要素の下の各子ノードを解析し、el.children を取得します。
      // 注意: children は要素セットを返し、childNodes はノードセットを返します。let nodes = el.children;

      // 各子ノードの命令を解析します for (var i = 0, length = nodes.length; i < length; i++) {
        ノードをノード[i]とします。
        // 現在のノードに子要素がある場合は、ノードを再帰的に解析します if(node.children){
          これをコンパイルします(ノード);
        }
        // v-textディレクティブを持つ要素を解析します if (node.hasAttribute("v-text")) {
          attrVal = node.getAttribute("v-text"); とします。
          node.textContent = this.$data[attrVal]; // ページをレンダリングする}
        // v-model ディレクティブを持つ要素を解析します if (node.hasAttribute("v-model")) {
          attrVal = node.getAttribute("v-model"); とします。
          ノードの値 = this.$data[attrVal];
        }
      }
    }
    観察(データ) {}
  }

クラスVue {
    コンストラクタ(オプション) {
      this.$el = document.querySelector(options.el);
      this.$data = オプション.data;
      
      this.$watcher = {};  

      this.compile(this.$el);

      this.observe(this.$data);
    }
    コンパイル(el) {
      ノードを el.children とします。

      (var i = 0、長さ = nodes.length; i < length; i++) {
        ノードをノード[i]とします。
        if(ノード.children){
          これをコンパイルします(ノード);
        }
        ノードが属性を持っている場合("v-text")
          attrVal = node.getAttribute("v-text"); とします。
          node.textContent = this.$data[attrVal];
        }
        ノードが属性を持っている場合("v-model")
          attrVal = node.getAttribute("v-model"); とします。
          ノードの値 = this.$data[attrVal];
          // ここを見て！ ！あとコードは3行だけです! ！
          node.addEventListener("入力", (ev)=>{
            this.$data[attrVal] = ev.target.value;
            // ここで実行してみてください: console.log(this.$data),
            // 入力ボックスにテキストを入力するたびに、データ内の msg 値も変化することがわかります})
        }
      }
    }
    観察(データ) {}
  }

クラスウォッチャー{
    コンストラクター(ノード、updatedAttr、vm、式){
      //渡された値を保存します。これらの値はページをレンダリングするときに使用されます。this.node = node;
      this.updatedAttr = 更新されたAttr;
      this.vm = vm;
      this.expression = 式;
      これを更新します。
    }
    アップデート（）{
      this.node[this.updatedAttr] = this.vm.$data[this.expression];
    }
  }

  クラスVue {
    // 渡されたオブジェクトを受け取るconstructor(options) {
      // 役に立つ情報を取得します this.$el = document.querySelector(options.el);
      this.$data = オプション.data;

      // コンテナ: {attribute1: [wathcer1, wathcer2...], attribute2: [...]}
      this.$watcher = {};

      // 要素の解析: コンパイルの実装
      this.compile(this.$el); // 要素を解析するには、要素を渡す必要があります // データのハイジャック: Observer の実装
      this.observe(this.$data); // データをハイジャックするには、データを渡す必要があります}
    コンパイル(el) {
      // 要素の下の各子ノードを解析し、el.children を取得します。
      // 拡張: children は要素セットを返し、childNodes はノードセットを返します。let nodes = el.children;

      // 各子ノードの命令を解析します for (var i = 0, length = nodes.length; i < length; i++) {
        ノードをノード[i]とします。
        // 現在のノードに子要素がある場合は、ノードを再帰的に解析します if (node.children) {
          これをコンパイルします(ノード);
        }
        ノードが属性を持っている場合("v-text")
          attrVal = node.getAttribute("v-text"); とします。
          // node.textContent = this.$data[attrVal]; 
          // ウォッチャーはインスタンス化時に update を呼び出し、このコード行を置き換えます/**
           * ノード データを更新するときに Watchcer が使用する必要があるデータを想像してみてください。 
           * egpinnerHTML = vm.$data[msg]
           * 渡されるパラメータは、現在のノード、更新されるノード属性、vue インスタンス、バインドされたデータ属性です。*/
          // コンテナにオブザーバーを追加します: {msg1: [Watcher, Watcher...], msg2: [...]}
          if (!this.$watcher[attrVal]) {
            this.$watcher[attrVal] = [];
          }
          this.$watcher[attrVal].push(新しいウォッチャー(ノード、"innerHTML"、this、attrVal))
        }
        ノードが属性を持っている場合("v-model")
          attrVal = node.getAttribute("v-model"); とします。
          ノードの値 = this.$data[attrVal];

          node.addEventListener("入力", (ev) => {
            this.$data[attrVal] = ev.target.value;
          })

          if (!this.$watcher[attrVal]) {
            this.$watcher[attrVal] = [];
          }
          // 上で使用した innerHTML とは異なり、ここでの入力は値属性を使用します this.$watcher[attrVal].push(new Watcher(node, "value", this, attrVal))
        }
      }
    }
    観察(データ) {
      Object.keys(data).forEach((key) => {
        let val = data[key]; // このvalは常にメモリに保存されます。data[key]にアクセスするたびに、このvalにアクセスします
        Object.defineProperty(データ、キー、{
          得る（） {
            return val; // ここで直接 data[key] を返すことはできません。そうしないと無限ループに陥ります},
          set(newVal) {
            val !== newVal の場合 {
              val = newVal; // 同様に、data[key] をここで直接設定することはできないため、無限ループが発生します this.$watcher[key].forEach((w) => {
                w.update();
              })
            }
          }
        })
      })
    }
  }

  クラスウォッチャー{
    コンストラクター(ノード、updatedAttr、vm、式) {
      //渡された値を保存します。this.node = node;
      this.updatedAttr = 更新されたAttr;
      this.vm = vm;
      this.expression = 式;
      これを更新します。
    }
    アップデート（） {
      this.node[this.updatedAttr] = this.vm.$data[this.expression];
    }
  }

  vm = new Vue({
    el: "#app",
    データ： {
      メッセージ: "こんにちは世界",
      メッセージ2: 「こんにちは、シャオフェイ」
    }
  })