Vue2.x における双方向バインディングの原理と実装

var ライブラリ = {
  本1: {
    名前： ""、
  },
  本2: "",
};
観察(ライブラリ);
library.book1.name = "vue authoritative guide"; // プロパティ名は監視されており、現在の値は "vue authoritative guide" です
library.book2 = "そのような本はありません"; // 属性 book2 は監視されており、現在の値は "そのような本はありません" です

// データの検出機能を追加 defineReactive(data, key, val) {
  observe(val); // すべてのサブ属性を再帰的に走査する let dep = new Dep(); // 新しい dep を作成する
  Object.defineProperty(データ、キー、{
    列挙可能: true、
    設定可能: true、
    取得: 関数() {
      if (依存ターゲット) {
        // サブスクライバーを追加するかどうかを決定します。これは最初の 1 回のみ必要で、次回は必要ありません。詳細については、Watcher 関数を参照してください。 dep.addSub(Dep.target); // サブスクライバーを追加します }
      戻り値:
    },
    設定: 関数(newVal) {
      if (val == newVal) return; // 値が変更されていない場合は戻ります
      val = 新しいVal;
      コンソール.log(
        「プロパティ」+ キー + 「」が監視されており、現在の値は次のとおりです: 「」+ newVal.toString() + 「」」
      );
      dep.notify(); // データが変更された場合は、すべてのサブスクライバーに通知します。
    },
  });
}

// 監視オブジェクトのすべてのプロパティ function observe(data) {
  if (!data || typeof data !== "object") {
    return; // オブジェクトでない場合は戻ります
  }
  Object.keys(データ).forEach(関数(キー) {
    defineReactive(データ、キー、データ[キー]);
  });
}
// Dep は、サブスクライバーを収集し、プロパティが変更されたときに更新関数をトリガーする役割を担います。
関数Dep() {
  this.subs = {};
}
派生プロトタイプ = {
  addSub: 関数(sub) {
    this.subs.push(sub);
  },
  通知: 関数() {
    this.subs.forEach((sub) => sub.update());
  },
};

関数ウォッチャー(vm, exp, cb) {
  this.cb = cb;
  this.vm = vm;
  this.exp = exp;
  this.value = this.get(); // サブスクライバーの操作に自分自身を追加します}

ウォッチャー.プロトタイプ = {
  更新: 関数() {
    これを実行してください。
  },
  実行: 関数() {
    var 値 = this.vm.data[this.exp];
    var oldVal = this.value;
    if (値 !== oldVal) {
      this.value = 値;
      this.cb.call(this.vm、値、oldVal);
    }
  },
  取得: 関数() {
    Dep.target = this; // ウォッチャーを追加するかどうかを決定するために自身をキャッシュします。
    var value = this.vm.data[this.exp]; // リスナーで get 関数を強制的に実行します。 Dep.target = null; // 自分自身を解放します。 return value;
  },
};

// マイビュー
プロキシキー(キー) {
    var self = this;
    Object.defineProperty(this, キー, {
        列挙可能: false、
        設定可能: true、
        取得: 関数 proxyGetter() {
            self.data[キー]を返します。
        },
        設定: 関数 proxySetter(newVal) {
            self.data[キー] = newVal;
        }
    });
}

関数 nodeToFragment(el) {
  var フラグメント = document.createDocumentFragment();
  var child = el.firstChild;
  （子）の間{
    // Dom 要素をフラグメントに移動します。fragment.appendChild(child);
    子 = el.firstChild;
  }
  フラグメントを返します。
}

関数compileElement(el){
    var childNodes = el.childNodes;
    var self = this;
    [].slice.call(childNodes).forEach(function(node) {
        var reg = /\{\{(.*)\}\}/; // {{xx}} に一致
        var テキスト = node.textContent;
        if (self.isTextNode(node) && reg.test(text)) { // この形式の命令であるかどうかを判断します {{}} self.compileText(node, reg.exec(text)[1]);
        }
        （node.childNodes && node.childNodes.length）の場合{
            self.compileElement(node); // 子ノードを再帰的に走査し続けます}
    });
},
関数compileText(ノード, exp) {
    var self = this;
    var initText = this.vm[exp];
    updateText(node, initText); // 初期化されたデータをビューに初期化します。 new Watcher(this.vm, exp, function (value) { // サブスクライバーを生成し、更新関数をバインドします。 self.updateText(node, value);
    });
},
関数 updateText (ノード, 値) {
    node.textContent = typeof value == 'undefined' ? '' : value;
}

関数コンパイル(ノード) {
  var nodeAttrs = node.attributes;
  var self = this;
  Array.prototype.forEach.call(nodeAttrs, function(attr) {
    var attrName = attr.name;
    if (isDirective(attrName)) {
      var exp = attr.value;
      var dir = attrName.substring(2);
      if (isEventDirective(dir)) {
        // イベント命令 self.compileEvent(node, self.vm, exp, dir);
      } それ以外 {
        // v-model ディレクティブ self.compileModel(node, self.vm, exp, dir);
      }
      node.removeAttribute(attrName); // 解析が完了したので、属性を削除します}
  });
}
// v-ディレクティブ解析関数 isDirective(attr) {
  attr.indexOf("v-") == 0 を返します。
}
// on: ディレクティブ解析関数 isEventDirective(dir) {
  dir.indexOf("on:") === 0 を返します。
}

クラスMyVue {
  コンストラクタ(オプション) {
    var self = this;
    オプションデータ
    this.methods = オプション.methods;
    Object.keys(this.data).forEach(function(key) {
      self.proxyKeys(キー);
    });
    これを観察します。
    新しいコンパイル(options.el、this);
    options.mounted.call(this); //すべてが完了したらマウントされた関数を実行します}
  プロキシキー(キー) {
    // this.data プロパティを this にプロキシします。var self = this;
    Object.defineProperty(this, キー, {
      列挙可能: false、
      設定可能: true、
      取得: 関数 getter() {
        self.data[キー]を返します。
      },
      設定: 関数 setter(newVal) {
        self.data[キー] = newVal;
      },
    });
  }
}