Vue2.0の双方向データバインディング原則を手動で実装する

//パブリッシュおよびサブスクライブモード関数 Dep() {
  this.subs = []//依存関係（つまり、モバイルウォッチャーインスタンス）を収集します。
}
Dep.prototype.addSub = function (sub) { // サブスクライバーを追加 this.subs.push(sub); // 実際に追加されるのはウォッチャーインスタンスです}
Dep.prototype.notify = function (sub) { //Publish、このメソッドは配列をトラバースし、各サブスクライバーの更新メソッドを実行させるために使用されます this.subs.forEach((sub) => sub.update())
}

関数ウォッチャー(fn) {
  this.fn = fn;
}
Watcher.prototype.update = function () { //各インスタンスがこのメソッドを継承できるように更新プロパティを追加します this.fn();
}
ウォッチャー = new ウォッチャー(関数 () {
  警告(1)
}); //サブスクリプション let dep = new Dep();
dep.addSub(watcher); //依存関係を追加し、サブスクライバーを追加します dep.notify(); //公開し、各サブスクライバーの更新メソッドを実行します

<テンプレート>
   <div id="アプリ">
    <div>obj.text の値:{{obj.text}}</div>
    <p>単語の値:{{word}}</p>
    <input type="text" v-model="word">
  </div>
</テンプレート>
<スクリプト>
  新しいVue({
    el: "#app",
    データ： {
      オブジェクト: {
        テキスト: "上"、
      },
      単語:「学習」
    },
    方法:{
    // ...
    }
  })
</スクリプト>

関数Vue(オプション = {}) {
  this.$options = options; //パラメータを受け取る var data = this._data = this.$options.data;
  observer(data); //データ内のデータを再帰的にバインドする for (let key in data) {
    val = data[キー]とします。
    オブザーバー(val);
    Object.defineProperty(this, キー, {
      列挙可能: true、
      得る（） {
        this._data[キー]を返します。
      },
      set(newVal) {
        this._data[キー] = newVal;
      }
    })
  }
  新しいコンパイル(options.el、これ)
};

関数オブザーバー(データ) {
  if (typeof data !== "object") return;
  return new Observer(data); //インスタンスを返す}
関数 Observer(データ) {
  let dep = new Dep(); // dep インスタンスを作成します for (let key in data) { // データを再帰的にバインドします let val = data[key];
    オブザーバー(val);
    Object.defineProperty(データ、キー、{
      列挙可能: true、
      得る（） {
        Dep.target && dep.depend(Dep.target); //Dep.target は Watcher のインスタンスです。 return val;
      },
      set(newVal) {
        (newVal === val)の場合{
          戻る;
        }
        val = 新しいVal;
        オブザーバー(newVal);
        dep.notify() //すべてのメソッドを実行させる}
    })
  }
}

関数Compile(el, vm) {
  vm.$el = document.querySelector(el);
  let fraction = document.createDocumentFragment(); //オブジェクト型のドキュメントフラグメントを作成しますwhile (child = vm.$el.firstChild) {
    フラグメント.appendChild(子);
  }; //while ループを使用してすべてのノードをドキュメント フラグメントに追加し、続いてドキュメント フラグメントに対する操作を実行し、最後にドキュメント フラグメントをページに追加します。ここで非常に重要な機能は、appendChid メソッドを使用して元の DOM ツリーのノードをフラグメントに追加すると、元のノードが削除されることです。
  フラグメントを置き換えます。

  関数 replace(フラグメント) {
    Array.from(fragment.childNodes).forEach((node) =>{//すべてのノードをループします。let text = node.textContent;
      reg = /\{\{(.*)\}\}/ とします。
      if (node.nodeType === 3 && reg.test(text)){//現在のノードがテキストノードであるかどうか、および {{obj.text}} の出力方法に準拠しているかどうかを判断します。条件が満たされている場合は、双方向データバインディングであるため、サブスクライバー (ウォッチャー) を追加する必要があることを意味します。
        console.log(正規表現$1); //obj.text
        let arr = RegExp.$1.split("."); // 値を簡単に取得できるように配列 [obj, text] に変換します。let val = vm;
        arr.forEach((key) => { //値を実現する this.obj.text
          val = val[キー];
        });
        新しいウォッチャー(vm, RegExp.$1, 関数(newVal) {
          node.textContent = text.replace(/\{\{(.*)\}\}/, newVal)
        });
        node.textContent = text.replace(/\{\{(.*)\}\}/, val); //ノードコンテンツに初期値を割り当てる}
      if (node.nodeType === 1) { //要素ノードであることを示します let nodeAttrs = node.attributes;
        Array.from(nodeAttrs).forEach((item) => {
          if (item.name.indexOf("v-") >= 0){//v-model命令かどうかを判断 node.value = vm[item.value]//ノードに値を割り当てる}
          // サブスクライバーを追加 new Watcher(vm, item.value, function (newVal) {
            ノード値 = vm[アイテム値]
          });
          node.addEventListener("入力", 関数(e) {
            newVal = e.target.value; とします。
            vm[item.value] = newVal;
          })
        })
      }
      if (node.childNodes) { //このノードにはまだ子要素があるので、再帰的にreplace(node);
      }
    })
  }

  //ページ上のドキュメントが消えてしまったため、ドキュメントのフラグメントをページに配置する必要があります。vm.$el.appendChild(fragment);

}

var uid = 0;
//パブリッシュとサブスクライブ関数 Dep() {
  this.id = uid++;
  this.subs = [];
}
Dep.prototype.addSub = function (sub) { // サブスクライブ this.subs.push(sub); // 実際に追加されるのはウォッチャーインスタンスです}
Dep.prototype.depend = function () { // サブスクリプション マネージャー if(Dep.target){//Dep.target が存在する場合にのみ追加されます Dep.target.addDep(this);
  }
}
Dep.prototype.notify = function (sub) { //パブリッシュし、配列を走査して各サブスクライバーの更新メソッドを実行させる this.subs.forEach((sub) => sub.update())
}

関数ウォッチャー(vm, exp, fn) {
  this.fn = fn;
  this.vm = vm;
  this.exp = exp //
  this.newDeps = [];
  this.depIds = 新しい Set();
  this.newDepIds = 新しい Set();
  Dep.target = this; //this は現在の (Watcher) インスタンスを参照します let val = vm;
  arr = exp.split(".") とします。
  arr.forEach((k) => { //this.obj.textの値を取得する
    val = val[k] // this.obj.text の値を取得すると、データハイジャックの get メソッドがトリガーされ、現在のサブスクライバー (ウォッチャーインスタンス) が依存関係に追加されます});
  依存関係ターゲット = null;
}
Watcher.prototype.addDep = 関数 (dep) {
  var id = dep.id;
  if (!this.newDepIds.has(id)){
    this.newDepIds.add(id);
    this.newDeps.push(dep);
    if(!this.depIds.has(id)){
      dep.addSub(これを);
    }
  }
 
}
Watcher.prototype.update = function () { //これは、バインドされた各メソッドが更新プロパティを追加する方法です。let val = this.vm;
  arr = this.exp.split("."); とします。
  arr.forEach((k) => { 
    val = val[k] //this.obj.textの値を取得し、更新操作のためにfnに渡します});
  this.fn(val); // 新しい値を渡す}