Einfache Implementierung von Mini-Vue-Rendering

<Text>
  <div id="app"></div>
  <script src="./renderer.js"></script>
</body>

// renderer.js
 
const h = (Tag, Requisiten, untergeordnete Elemente) => {
  zurückkehren {
    Etikett,
    Requisiten,
    Kinder
  }
}

const vdom = h("div", {Klasse: "Header"}, [
  h("h2", null, "Hallo Welt"),
  h("h2", {id: 0}, h("span", null, "Spanne")) // Wenn die Eigenschaften keinen Wert haben, muss ein Nullwert übergeben werden, er kann nicht weggelassen werden]);
Konsole.log(vdom);

const mount = (vnodes, app) => {
  // Erstellen Sie einen Knoten über den Tag-Wert in vnodes, z. B. („div“, „h2“) // Speichern Sie auch ein echtes DOM im vnodes-Objekt, um zukünftige Aktualisierungen, Ergänzungen usw. zu erleichtern. const el = vnodes.el = document.createElement(vnodes.tag); 
  // Nachdem wir diesen Knoten erhalten haben, fügen wir Eigenschaften hinzu, indem wir den Props-Wert beurteilen, wenn (vnodes.props) {
    für (let-Schlüssel in vnodes.props) {
      // Hier treffen wir nach Erhalt des Schlüsselwerts in den Props eine Beurteilung: let value = vnodes.props[key];
      wenn (Schlüssel.startetMit('ein')) {
        // Wenn der Benutzer beispielsweise onClick="changeData" schreibt, wird dies als Ereignislistenerfunktion verarbeitet el.addEventListener(key.slice(2).toLowerCase(), value)
      } anders {
        el.setAttribute(Schlüssel, Wert)
      }
      // Nachfolgend finden Sie einige Urteile, z. B. Anweisungen, v-if usw. für die Grenzverarbeitung}
  }
  // Nach der Verarbeitung der Eigenschaften ist der letzte Knoten Children if (vnodes.children) {
    wenn (Typ von vnodes.children === 'Zeichenfolge') {
      // Wenn dies ein String-Typ ist, können Sie ihn direkt zum Knoten el.textContent = vnodes.children hinzufügen.
    } anders {
      // In diesem Fall handelt es sich um einen Array-Typ, der untergeordnete Knoten enthält und dann durch Durchlauf untergeordnete Knoten generiert vnodes.children.forEach(vnode => {
        // Den untergeordneten Knoten rekursiv erneut in den aktuellen Knoten einhängen mount(vnode, el)
      })
    }
  }
  //Mounten Sie abschließend diesen realen Knoten in dem App-Knoten, den wir in app.appendChild(el) übergeben haben.
}
const app = document.querySelector("#app")
mount(vdom, app)

//Patch-Funktion n1: alter Knoten, n2: neuer Knoten // Im Vue-Quellcode werden der alte und der neue Vnode jeweils durch n1 und n2 dargestellt const patch = (n1, n2) => {
  // Oben haben wir das Knotenattribut el über die Mount-Funktion zu n2 hinzugefügt und es an n2 gebunden const el = n2.el = n1.el
  // Beginnen Sie zunächst mit den Tags in den beiden if (n1.tag == n2.tag) {
    // n1 und n2 haben das gleiche Tag, dann vergleiche die Eigenschaften
    const n1Props = n1.props || {};
    const n2Props = n2.props || {};
    // Hole Props jeweils von n1 und n2 und vergleiche für (let key in n2Props) {
      // Alle Schlüssel in n2 herausnehmen und prüfen, ob der Schlüsselwert von n2 mit dem Schlüsselwert von n1 übereinstimmt const n1Value = n1Props[key] || '';
      const n2Value = n2Props[Schlüssel] || '';
      wenn (n1Wert !== n2Wert) {
        wenn (Schlüssel.startetMit('ein')) {
          // Wenn der Benutzer beispielsweise onClick="changeData" schreibt, wird dies als Event-Listener-Funktion verarbeitet el.addEventListener(key.slice(2).toLowerCase(), n2Value)
        } anders {
          el.setAttribute(Schlüssel, n2Wert)
        }
      }
      //Wenn sie gleich sind, wird keine Verarbeitung durchgeführt}
    für (let-Schlüssel in n1Props) {
      const alterWert = n1Props[Schlüssel];
      if (!(Schlüssel in n2Props)) {
        wenn (Schlüssel.startetMit('ein')) {
          el.removeEventListener(Schlüssel.Slice(2).toLowerCase(), alterWert)
        } anders {
          el.removeAttribute(Schlüssel)
        }
      }
    }
  } anders {
    // Tag ist anders, hole den übergeordneten Knoten von n1 const n1Parent = n1.el.parentElement;
    // Entferne den alten Knoten vom übergeordneten Knoten durch removeChild und mounte dann n2 zum übergeordneten Knoten n1Parent.removeChild(n1.el); //n1.el ist der echte Dom-Knoten, der dem Objekt durch die Mount-Funktion mount(n2, n1Parent) hinzugefügt wurde.
  }
  // Zum Schluss verarbeiten wir die untergeordneten Elemente, was relativ kompliziert ist. // Untergeordnete Elemente können Zeichenfolgen oder Arrays sein, also schauen wir uns zuerst an, wie die Zeichenfolge verarbeitet wird. const n1Children = n1.children || [];
  const n2Children = n2.children || [];
  wenn (Typ von n2Children === "Zeichenfolge") {
    // Wenn der neue Knoteninhalt eine Zeichenfolge ist, verwenden Sie direkt innerhtml, um el.innerHtml = n2Children zu ersetzen.
  } anders {
    // Die folgende Situation ist, wenn n2.children ein Array ist, if (typeof n1.children === "string") {
      // n1.children ist ein String, n2.children ist ein Array el.innerHtml = ''; // Erst den Knoteninhalt prüfen, dann neuen Inhalt hinzufügen mount(n2.children, el)
    } anders {
      // Wenn beides Array-Typen sind, wird der Schlüsselwert hier nicht berücksichtigt const minLength = Math.min(n1Children.length, n2Children.length);
      für (sei i = 0; i < minLength; i++) {
        Patch(n1Kinder[i], n2Kinder[i]);
      }
      wenn (n2Kinder.Länge > n1Kinder.Länge) {
        n2Children.slice(minLength).fürJedes(Element => {
          einhängen(Artikel, el)
        })
      }
      wenn (n2Kinder.Länge < n1Kinder.Länge) {
        n1Children.slice(minLength).fürJedes(Element => {
          el.entfernenKind(item.el)
        })
      }
    }
  }
}

const vdom = h("div", {Klasse: "Header"}, [
  h("h2", null, "Hallo Welt"),
  h("h2", {id: 0}, [h("span", null, "Spanne")]) // Wenn die Eigenschaften keinen Wert haben, muss ein Nullwert übergeben werden, er kann nicht weggelassen werden]);
const app = document.querySelector("#app")
mount(vdom, app)
setTimeout(()=> { // Übergebe die neuen und alten Vnodes nach 3 Sekunden an den Patch
  const vdom1 = h("div", {Klasse: "Header"}, [
    h("h3", null, "Hallo Welt"),
    h("span", null, "Spanne")
  ])
  Patch(vdom, vdom1)
},3000)