Manuelle Implementierung des bidirektionalen Datenbindungsprinzips von Vue2.0

//Veröffentlichungs- und Abonnementmodus Funktion Dep() {
  this.subs = []//Abhängigkeiten sammeln (also Mobile Watcher Instanzen),
}
Dep.prototype.addSub = function (sub) { //Abonnenten hinzufügen this.subs.push(sub); //Eigentlich wird die Watcher-Instanz hinzugefügt}
Dep.prototype.notify = function (sub) { //Veröffentlichen, diese Methode wird verwendet, um das Array zu durchlaufen und die Aktualisierungsmethode jedes Abonnenten this.subs.forEach((sub) => sub.update()) ausführen zu lassen.
}

Funktion Watcher(fn) {
  dies.fn = fn;
}
Watcher.prototype.update = function () { //Fügen Sie eine Update-Eigenschaft hinzu, damit jede Instanz diese Methode erben kann this.fn();
}
let watcher = neuer Watcher(Funktion () {
  Alarm(1)
}); //Abonnement let dep = new Dep();
dep.addSub(watcher); //Abhängigkeit hinzufügen, Abonnenten hinzufügen dep.notify(); //Veröffentlichen, die Update-Methode jedes Abonnenten ausführen lassen

<Vorlage>
   <div id="app">
    <div>Der Wert von obj.text:{{obj.text}}</div>
    <p>Der Wert von Wort:{{Wort}}</p>
    <Eingabetyp="Text" v-Modell="Wort">
  </div>
</Vorlage>
<Skript>
  neuer Vue({
    el: "#app",
    Daten: {
      Objekt: {
        Text: "Nach oben",
      },
      Wort: „Lernen“
    },
    Methoden:{
    // ...
    }
  })
</Skript>

Funktion Vue(Optionen = {}) {
  this.$options = options; //Parameter empfangen var data = this._data = this.$options.data;
  Beobachter(Daten); //Binde die Daten rekursiv in Daten für (let-Schlüssel in Daten) {
    let val = Daten[Schlüssel];
    Beobachter(Wert);
    Object.defineProperty(dieser, Schlüssel, {
      aufzählbar: wahr,
      erhalten() {
        gib dies zurück._data[Schlüssel];
      },
      setze(neuerWert) {
        this._data[Schlüssel] = neuerWert;
      }
    })
  }
  neu Kompilieren(options.el, this)
};

Funktion Beobachter(Daten) {
  wenn (Datentyp !== "Objekt") return;
  returniere neuen Observer(data); //Gib eine Instanz zurück}
Funktion Beobachter(Daten) {
  let dep = new Dep(); //Erstellen Sie eine Dep-Instanz für (let-Schlüssel in Daten) { //Binden Sie die Daten rekursiv let val = data[Schlüssel];
    Beobachter(Wert);
    Object.defineProperty(Daten, Schlüssel, {
      aufzählbar: wahr,
      erhalten() {
        Dep.target && dep.depend(Dep.target); //Dep.target ist eine Instanz von Watcher return val;
      },
      setze(neuerWert) {
        wenn (neuerWert === Wert) {
          zurückkehren;
        }
        val = neuerWert;
        Beobachter(neuerWert);
        dep.notify() //Alle Methoden ausführen lassen}
    })
  }
}

Funktion Kompilieren(el, vm) {
  vm.$el = document.querySelector(el);
  let fragment = document.createDocumentFragment(); //Dokumentfragment erstellen, das vom Objekttyp istwhile (child = vm.$el.firstChild) {
    fragment.appendChild(Kind);
  }; //Verwenden Sie eine while-Schleife, um alle Knoten zum Dokumentfragment hinzuzufügen, führen Sie anschließend Operationen am Dokumentfragment aus und fügen Sie das Dokumentfragment schließlich zur Seite hinzu. Eine sehr wichtige Funktion hierbei ist, dass der ursprüngliche Knoten gelöscht wird, wenn die Methode appendChid verwendet wird, um einem Fragment einen Knoten im ursprünglichen DOM-Baum hinzuzufügen.
  ersetzen (Fragment);

  Funktion ersetzen(Fragment) {
    Array.from(fragment.childNodes).forEach((node) => {//Alle Knoten durchgehen let text = node.textContent;
      sei reg = /\{\{(.*)\}\}/;
      if (node.nodeType === 3 && reg.test(text)) {//Beurteilen Sie, ob der aktuelle Knoten ein Textknoten ist und ob er der Ausgabemethode von {{obj.text}} entspricht. Wenn die Bedingungen erfüllt sind, bedeutet dies, dass es sich um eine bidirektionale Datenbindung handelt und ein Abonnent (Watcher) hinzugefügt werden muss.
        konsole.log(RegExp.$1); //obj.text
        let arr = RegExp.$1.split("."); //In Array [Obj, Text] konvertieren, um Werte einfach abzurufen let val = vm;
        arr.forEach((key) => { //Ermittle den Wert this.obj.text
          val = val[Schlüssel];
        });
        neuer Watcher(vm, RegExp.$1, Funktion (neuerWert) {
          node.textContent = text.replace(/\{\{(.*)\}\}/, neuerWert)
        });
        node.textContent = text.replace(/\{\{(.*)\}\}/, val); //Weisen Sie dem Knoteninhalt den Anfangswert zu}
      if (node.nodeType === 1) { //Zeigt an, dass es sich um ein Elementknoten handelt let nodeAttrs = node.attributes;
        Array.from(nodeAttrs).fürEach((item) => {
          if (item.name.indexOf("v-") >= 0) {//Beurteilen, ob es sich um eine v-Modell-Anweisung handelt node.value = vm[item.value]//Dem Knoten einen Wert zuweisen}
          //Abonnenten hinzufügen new Watcher(vm, item.value, function (newVal) {
            Knoten.Wert = vm[Element.Wert]
          });
          node.addEventListener("Eingabe", Funktion (e) {
            sei neuer Wert = e.Zielwert;
            vm[item.value] = neuerWert;
          })
        })
      }
      if (node.childNodes) { //Dieser Knoten hat noch untergeordnete Elemente, rekursiv replace(node);
      }
    })
  }

  //Das liegt daran, dass das Dokument auf der Seite weg ist, also müssen wir das Dokumentfragment in die Seite einfügen vm.$el.appendChild(fragment);

}

var uid=0;
//Veröffentlichen und Abonnieren Funktion Dep() {
  diese.id=uid++;
  dies.subs = [];
}
Dep.prototype.addSub = function (sub) { //Abonnieren Sie this.subs.push(sub); //Eigentlich wird die Watcher-Instanz hinzugefügt}
Dep.prototype.depend = function () { // Abonnement-Manager if(Dep.target){//Nur wenn Dep.target vorhanden ist, wird es hinzugefügt Dep.target.addDep(this);
  }
}
Dep.prototype.notify = function (sub) { //Veröffentlichen, das Array durchlaufen und die Update-Methode jedes Abonnenten ausführen lassen this.subs.forEach((sub) => sub.update())
}

Funktion Watcher(vm, exp, fn) {
  dies.fn = fn;
  dies.vm = vm;
  dies.exp = exp //
  dies.newDeps = [];
  this.depIds = neues Set();
  this.newDepIds = neues Set();
  Dep.target = this; //dies bezieht sich auf die aktuelle (Watcher-)Instanz let val = vm;
  lass arr = exp.split(".");
  arr.forEach((k) => { //den Wert von this.obj.text abrufen
    val = val[k] // Wenn der Wert von this.obj.text übernommen wird, wird die Get-Methode des Daten-Hijackings ausgelöst und der aktuelle Teilnehmer (Watcher-Instanz) zur Abhängigkeit hinzugefügt});
  Dep.Ziel = null;
}
Watcher.prototype.addDep = Funktion (dep) {
  var id=dep.id;
  wenn (!this.newDepIds.has(id)){
    dies.newDepIds.add(id);
    dies.newDeps.push(dep);
    wenn(!this.depIds.has(id)){
      dep.addSub(dies);
    }
  }
 
}
Watcher.prototype.update = function () { //So fügt jede gebundene Methode eine Update-Eigenschaft hinzu let val = this.vm;
  lass arr = this.exp.split(".");
  arr.fürEach((k) => { 
    val = val[k] //Holen Sie sich den Wert von this.obj.text und übergeben Sie ihn an fn für den Aktualisierungsvorgang});
  this.fn(val); // einen neuen Wert übergeben}