So verwenden Sie die JSX-Syntax richtig in Vue

Vorwort

Es ist Zeit, wieder mal nachzulassen. Ich glaube, ich kann es nicht verschwenden. Ich habe Vant für H5-Seiten verwendet. Aus Neugierde bezüglich des Quellcodes habe ich eine Kopie des Vant-Quellcodes von Git gezogen. Es stellte sich heraus, dass alle Komponenten in JSX geschrieben waren, also begann ich, die Verwendung von JSX in Vue zu erkunden.

Virtueller DOM

Was ist Virtual DOM?

Zuvor wollen wir uns zunächst mit dem virtuellen DOM befassen. Sowohl das Vue- als auch das React-Framework verwenden intern virtuelles DOM. Der Grund dafür ist, dass der Rechenaufwand für den Betrieb des DOM über JS sehr hoch ist. Obwohl JS sehr schnell aktualisiert wird, ist der Aufwand für das Suchen und Aktualisieren des DOM sehr hoch. Welche Methoden können also zur Optimierung verwendet werden? Frameworks wie Vue verwenden JS-Objekte, die geändert und stapelweise verarbeitet werden, um das DOM auf einmal zu aktualisieren. Daher ist das virtuelle DOM im Wesentlichen ein JS-Objekt.

Vorteile von Virtual DOM

• Reduzierung der Suchkosten vom ursprünglichen Betrieb des realen DOM zum Betrieb des virtuellen DOM
• Durch den Diff-Vergleich können wir Datenänderungen schneller lokalisieren und das DOM aktualisieren
• Besseres UI-Update
• Abstrakter Rendering-Prozess, der plattformübergreifende Funktionen bietet, wie z. B. die createRenderer-API in vue3

Was ist eine Renderfunktion?

Die Rendering-Funktion wird zum Generieren des virtuellen DOM verwendet. Wir schreiben die Vorlagensyntax in eine einzelne Vue-Datei, die schließlich in der zugrunde liegenden Implementierung in eine Rendering-Funktion kompiliert wird

Vue empfiehlt in den meisten Fällen die Verwendung von Vorlagen zum Erstellen Ihres HTML. In einigen Szenarien benötigen Sie jedoch wirklich die volle Programmierleistung von JavaScript. In diesem Fall können Sie Renderfunktionen verwenden, die näher am Compiler sind als Vorlagen.

Wenn das folgende Szenario eintritt, kann die folgende Schreibmethode zwar den gewünschten Effekt erzielen, ist aber nicht nur zeitaufwändig, sondern wir müssen sie auch für jeden Leveltitel wiederholen. Wenn wir das Ankerelement hinzufügen, müssen wir es in jedem v-if/v-else-if-Zweig erneut wiederholen

const { createApp } = Vue

const app = createApp({})

app.component('ankerte Überschrift', {
  Vorlage: `
    <h1 v-if="Ebene === 1">
      <Steckplatz></Steckplatz>
    </h1>
    <h2 v-else-if="Ebene === 2">
      <Steckplatz></Steckplatz>
    </h2>
    <h3 v-else-if="Ebene === 3">
      <Steckplatz></Steckplatz>
    </h3>
    <h4 v-else-if="Ebene === 4">
      <Steckplatz></Steckplatz>
    </h4>
    <h5 v-else-if="Ebene === 5">
      <Steckplatz></Steckplatz>
    </h5>
    <h6 v-else-if="Ebene === 6">
      <Steckplatz></Steckplatz>
    </h6>
  `,
  Requisiten: {
    Ebene:
      Typ: Nummer,
      erforderlich: true
    }
  }
})

Obwohl Vorlagen in den meisten Komponenten gut funktionieren, sind sie hier eindeutig nicht geeignet. Versuchen wir also, das obige Beispiel mithilfe der Renderfunktion neu zu schreiben:

const { createApp, h } = Vue

const app = createApp({})

app.component('ankerte Überschrift', {
  rendern() {
    return h(
      'h' + diese.Ebene, // Tag-Name
      {}, // Requisiten/Attribute
      this.$slots.default() // Array von untergeordneten Elementen
    )
  },
  Requisiten: {
    Ebene:
      Typ: Nummer,
      erforderlich: true
    }
  }
})

jsx

Es ist etwas mühsam, Rendering-Funktionen auf diese Weise zu schreiben. Gibt es eine Möglichkeit, sie näher an der Vorlage zu schreiben? Vue bietet ein Babel-Plugin-JSX-Babel-Plugin, damit Vue das Schreiben von JSX unterstützt

Ich verwende vuecli, um ein vue3 + ts-Projekt zu erstellen. Das Gerüst hat die zugehörigen Abhängigkeiten von jsx und ts integriert.

Zwei Möglichkeiten, jsx in vue3 zu schreiben

Ändern Sie das Dateisuffix direkt von vue in tsx oder jsx

In vue3 können Sie die Renderoption direkt zum Schreiben verwenden

importiere { defineComponent } von "vue";
exportiere StandarddefiniereKomponente({
  Name: "Jsx",
  rendern() {
    return <div>Ich bin ein Div</div>;
  },
});

Sie können auch im Setup zurückkehren

importiere { defineComponent } von "vue";
exportiere StandarddefiniereKomponente({
  Name: "Jsx",
  aufstellen() {
    return () => <div>Ich bin div</div>;
  },
});

Beide Methoden sind akzeptabel, je nach Ihren persönlichen Vorlieben. Sie können im Setup nicht darauf zugreifen, aber Sie können im Render hierüber auf die aktuelle Vue-Instanz zugreifen.

Verwendung

Die Klassenbindung unterscheidet sich von der JSX-Bindung von React. React verwendet className, während vue class verwendet.

 aufstellen() {
   return () => <div class="test">Ich bin div</div>;
 },

Stilbindung

  aufstellen() {
    return () => <div style={{ color: "red" }}>Ich bin div</div>;
  },

Requisitenbindung

// Übergeordnete Komponente setup() {
    return () => (
      <div Stil = {{ Farbe: "rot" }}>
        <span>Ich bin die übergeordnete Komponente</span>
        <Mycom msg={"Ich bin der von der übergeordneten Komponente übergebene Wert"} />
      </div>
 );

// Unterkomponente, der erste Parameter von setup kann den Wert in props setup(props) { erhalten.
    return () => <div>Ich bin eine untergeordnete Komponente {props.msg}</div>;
  },

Ereignisbindung

aufstellen() {
    Funktion EreignisKlick() {
      console.log("klicken");
    }
    return () => <button onClick={eventClick}>Schaltfläche</button>;
},

Benutzerdefinierte Komponentenereignisse

// Unterkomponente importiere { defineComponent } von „vue“;
exportiere StandarddefiniereKomponente({
  Name: "Mycom",
  gibt aus: ["Ereignis"],
  setup(Eigenschaften, { emit }) {
    Funktion sendData() {
      emit("Ereignis", "von Unterkomponente übergebene Daten");
    }
    return () => (
      <div>
        <span>Benutzerdefinierte Ereignisse</span>
        <button onClick={sendData}>Daten senden</button>
      </div>
    );
  },
});

// Übergeordnete Komponente // @ts-nocheck
// Das ist in jsx in Ordnung, aber es wird ein ts-Typfehler in tsx gemeldet, daher habe ich die aktuelle Datei-ts-Überwachung @ts-nocheck oben ignoriert
importiere { defineComponent } von "vue";
importiere Mycom aus "./mycom";
exportiere StandarddefiniereKomponente({
  Name: "Jsx",
  aufstellen() {
    Funktion getSon(msg: Zeichenfolge) {
      Konsole.log(Nachricht);
    }
    return () => (
      <div>
        <Mycom onEvent={getSon} />
      </div>
    );
  },
});

Sie können TS-Typfehler auch auf diese Weise lösen

  aufstellen() {
    Funktion getSon(msg: Zeichenfolge) {
      Konsole.log(Nachricht);
    }
    return () => (
      <div>
        <Mycom {...{ onEvent: getSon }} />
      </div>
    );
  },

Spielautomaten

// Übergeordnete Komponente setup() {
    Konstante Slots = {
      test: () => <div>Benannter Slot</div>,
      default: () => <div>Standard-Slot</div>,
    };
    return () => (
      <div>
        <Mycom v-slots={slots}></Mycom>
      </div>
    );
},

setup(Requisiten, {Slots}) {
// Unterkomponente return () => (
      <div>
        <span>Steckplatz</span>
        {slots.default?.()}
        {slots.test?.()}
      </div>
    );
  },

Anweisungen wie v-if, v-for usw. können in jsx nicht verwendet werden. jsx unterstützt nur die Anweisungen v-model und v-show.

  aufstellen() {
    const inputData = ref("");
    return () => (
      <div>
        <span v-show={true}>Anzeigen</span>
        <span v-show={false}>Ausblenden</span>
        <Eingabetyp="Text" v-Modell={inputData.value} />
        <span>{Eingabedaten.Wert}</span>
      </div>
    );
},

endlich

Ohne weitere Umschweife öffne ich den Vant-Quellcode und bereite mich darauf vor, den Quellcode meiner ersten Komponente zu öffnen, indem ich src => button => button.tsx lese.

Dies ist das Ende dieses Artikels über die korrekte Verwendung von jsx in vue. Weitere relevante Inhalte zur Verwendung von jsx in vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

siehe

Vue-Renderfunktion
• vuejsx-Dokumentation
• Probleme