Implementierungsmethode für die bidirektionale Bindung von Vue-Daten

<div id="app">
  <h1 v-text="msg"></h1>
  <Eingabetyp="Text" v-Modell="Nachricht">
  <div>
    <h1 v-text="msg2"></h1>
    <Eingabetyp="text" v-modell="msg2">
  </div>
</div>

lass vm = neues Vue({
    el: "#app",
    Daten: {
      Nachricht: "Hallo Welt",
      msg2: „hallo xiaofei“
    }
  })

Klasse Vue {
    // Empfange das übergebene Objekt Konstruktor(Optionen) {
      // Gültige Informationen speichern this.$el = document.querySelector(options.el);
      dies.$data = Optionen.data;

      //Container: {Attribut 1: [wathcer1, wathcer2...], Attribut 2: [...]}, wird zum Speichern jedes Attributbeobachters verwendet. $watcher = {};

      // Elemente analysieren: Implementieren von Compile
      this.compile(this.$el); // Um ​​das Element zu analysieren, müssen Sie das Element übergeben in // Daten kapern: Observer implementieren
      this.observe(this.$data); // Um ​​Daten zu kapern, müssen Sie die Daten übergeben}
    kompilieren() {}
    beobachten() {}
  }

Klasse Vue {
    // Empfange das übergebene Objekt Konstruktor(Optionen) {
      // Nützliche Informationen erhalten this.$el = document.querySelector(options.el);
      dies.$data = Optionen.data;

      // Container: {attribute1: [wathcer1, wathcer2...], attribute2: [...]}
      dies.$watcher = {};

      // 2. Elemente analysieren: Implementieren von Compile
      this.compile(this.$el); // Um ​​das Element zu parsen, musst du das Element übergeben in // 3. Daten kapern: Observer implementieren
      this.observe(this.$data); // Um ​​Daten zu kapern, müssen Sie die Daten übergeben}
    kompilieren(el) {
      // Analysieren Sie jeden untergeordneten Knoten unter dem Element, um el.children zu erhalten.
      // Hinweis: children gibt einen Elementsatz zurück, childNodes gibt einen Knotensatz zurück let nodes = el.children;

      // Analysiere die Anweisungen für jeden untergeordneten Knoten for (var i = 0, length = nodes.length; i < length; i++) {
        sei Knoten = Knoten[i];
        // Wenn der aktuelle Knoten untergeordnete Elemente hat, den Knoten rekursiv analysieren if(node.children){
          dies.kompilieren(Knoten);
        }
        // Elemente mit der v-text-Direktive analysieren if (node.hasAttribute("v-text")) {
          let attrVal = node.getAttribute("v-text");
          node.textContent = this.$data[attrVal]; // Seite rendern}
        // Elemente mit v-model-Direktiven analysieren if (node.hasAttribute("v-model")) {
          let attrVal = node.getAttribute("v-Modell");
          Knoten.Wert = dies.$data[attrVal];
        }
      }
    }
    beobachten(Daten) {}
  }

Klasse Vue {
    Konstruktor(Optionen) {
      dies.$el = document.querySelector(options.el);
      dies.$data = Optionen.data;
      
      dies.$watcher = {};  

      dies.kompilieren(dies.$el);

      dies.beobachten(diese.$daten);
    }
    kompilieren(el) {
      lass Knoten = el.children;

      für (var i = 0, Länge = Knoten.Länge; i < Länge; i++) {
        sei Knoten = Knoten[i];
        wenn(Knoten.Kinder){
          dies.kompilieren(Knoten);
        }
        wenn (node.hasAttribute("v-text")) {
          let attrVal = node.getAttribute("v-text");
          node.textContent = dies.$data[attrVal];
        }
        wenn (node.hasAttribute("v-model")) {
          let attrVal = node.getAttribute("v-Modell");
          Knoten.Wert = dies.$data[attrVal];
          // Schau mal hier! ! Nur noch drei Codezeilen! !
          node.addEventListener("Eingabe", (ev)=>{
            dies.$data[attrVal] = ev.target.value;
            // Sie können versuchen, es hier auszuführen: console.log(this.$data),
            // Sie können sehen, dass sich jedes Mal, wenn Sie Text in das Eingabefeld eingeben, auch der Nachrichtenwert in den Daten ändert})
        }
      }
    }
    beobachten(Daten) {}
  }

Klasse Watcher{
    Konstruktor(Knoten, aktualisiertesAttr, vm, Ausdruck){
      //Speichere die übergebenen Werte. Diese Werte werden beim Rendern der Seite verwendet. this.node = node;
      dies.updatedAttr = updatedAttr;
      dies.vm = vm;
      dieser.Ausdruck = Ausdruck;
      dies.update();
    }
    aktualisieren(){
      dieser.Knoten[dieses.updatedAttr] = diese.vm.$data[dieser.Ausdruck];
    }
  }

  Klasse Vue {
    // Empfange das übergebene Objekt Konstruktor(Optionen) {
      // Nützliche Informationen erhalten this.$el = document.querySelector(options.el);
      dies.$data = Optionen.data;

      // Container: {attribute1: [wathcer1, wathcer2...], attribute2: [...]}
      dies.$watcher = {};

      // Elemente analysieren: Implementieren von Compile
      this.compile(this.$el); // Um ​​das Element zu analysieren, müssen Sie das Element übergeben in // Daten kapern: Observer implementieren
      this.observe(this.$data); // Um ​​Daten zu kapern, müssen Sie die Daten übergeben}
    kompilieren(el) {
      // Analysieren Sie jeden untergeordneten Knoten unter dem Element, um el.children zu erhalten.
      // Erweiterung: children gibt einen Elementsatz zurück, childNodes gibt einen Knotensatz zurück let nodes = el.children;

      // Analysiere die Anweisungen für jeden untergeordneten Knoten for (var i = 0, length = nodes.length; i < length; i++) {
        sei Knoten = Knoten[i];
        // Wenn der aktuelle Knoten untergeordnete Elemente hat, den Knoten rekursiv analysieren, if (node.children) {
          dies.kompilieren(Knoten);
        }
        wenn (node.hasAttribute("v-text")) {
          let attrVal = node.getAttribute("v-text");
          // node.textContent = this.$data[attrVal]; 
          // Der Watcher ruft bei der Instanziierung „update“ auf und ersetzt diese Codezeile/**
           * Stellen Sie sich vor, welche Daten Wathcer zum Aktualisieren von Knotendaten verwenden muss? 
           * egpinnerHTML = vm.$data[msg]
           * Die zu übergebenden Parameter sind also: aktueller Knoten, zu aktualisierende Knotenattribute, Vue-Instanz, gebundene Datenattribute*/
          // Beobachter zum Container hinzufügen: {msg1: [Watcher, Watcher...], msg2: [...]}
          wenn (!this.$watcher[attrVal]) {
            dies.$watcher[attrVal] = [];
          }
          dies.$watcher[attrVal].push(neuer Watcher(Knoten, "innerHTML", dies, attrVal))
        }
        wenn (node.hasAttribute("v-model")) {
          let attrVal = node.getAttribute("v-Modell");
          Knoten.Wert = dies.$data[attrVal];

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

          wenn (!this.$watcher[attrVal]) {
            dies.$watcher[attrVal] = [];
          }
          // Anders als das oben verwendete innerHTML verwendet die Eingabe hier das Wertattribut this.$watcher[attrVal].push(new Watcher(node, "value", this, attrVal))
        }
      }
    }
    beobachten(Daten) {
      Objekt.Schlüssel(Daten).fürJeden((Schlüssel) => {
        let val = data[key]; // Dieser Wert wird immer im Speicher gespeichert. Jedes Mal, wenn Sie auf data[key] zugreifen, greifen Sie auf diesen Wert zu
        Object.defineProperty(Daten, Schlüssel, {
          erhalten() {
            return val; // Du kannst data[key] hier nicht direkt zurückgeben, sonst gerät es in eine Endlosschleife},
          setze(neuerWert) {
            wenn (Wert !== neuerWert) {
              val = newVal; // Ebenso kann data[key] hier nicht direkt gesetzt werden, was zu einer Endlosschleife führen würde this.$watcher[key].forEach((w) => {
                w.update();
              })
            }
          }
        })
      })
    }
  }

  Klasse Watcher {
    Konstruktor(Knoten, aktualisiertesAttr, vm, Ausdruck) {
      //Den übergebenen Wert speichern this.node = node;
      dies.updatedAttr = updatedAttr;
      dies.vm = vm;
      dieser.Ausdruck = Ausdruck;
      dies.update();
    }
    aktualisieren() {
      dieser.Knoten[dieses.updatedAttr] = diese.vm.$data[dieser.Ausdruck];
    }
  }

  lass vm = neues Vue({
    el: "#app",
    Daten: {
      Nachricht: "Hallo Welt",
      msg2: „hallo xiaofei“
    }
  })