Praktischer Bericht über die Entwicklung von Vue3- und TypeScript-Projekten

Überblick

Vue3 ist schon eine Weile auf dem Markt. Wir haben im Team viele Geschäftspraktiken durchgeführt und uns auch einige eigene Gedanken gemacht.

Generell hat Vue3 sowohl bei den zugrunde liegenden Prinzipien als auch bei der tatsächlichen Geschäftsentwicklung große Fortschritte gemacht.

Die Verwendung eines Proxys anstelle der vorherigen Object.defineProperty-API bietet eine bessere Leistung und behebt die vorherigen Mängel von Vue bei der Verarbeitung von Objekten und Arrays. Im Diff-Algorithmus wird die statische Tag-Methode verwendet, wodurch die Ausführungseffizienz von Vue erheblich verbessert wird.

Auf der Nutzungsebene wechselten wir von der Options-API zur Kompositions-API und gaben im tatsächlichen Geschäft nach und nach den ursprünglichen isolierten Schreibstil von Daten, Methoden und Berechnungen auf. Die Compositon-API ist fokussierter und betont die Zusammenführung verwandter Unternehmen. Gleichzeitig bietet es in der Kompositions-API eine Möglichkeit zur Trennung von Belangen, um eine zu schwere Geschäftslogik zu vermeiden, was die Lesbarkeit unseres Codes erheblich verbessert.

Es unterstützt TypeScript vollständig und die Typüberprüfung ist für Vue3 zu einer Qualitätssicherung für die zukünftige Entwicklung großer Projekte geworden. Gleichzeitig steht es auch dem Trend gegenüber – die Zukunft des Front-Ends ist TypeScript!

1. Kompositions-API

Das Wesentliche der Compositon-API spiegelt sich im Code wider, der eine Setup-Funktion darstellt. In dieser Setup-Funktion werden die zurückgegebenen Daten in der Vorlage der Komponente verwendet. Das zurückgegebene Objekt stellt bis zu einem gewissen Grad das Datenattribut im vorherigen vue2 dar.

importiere { defineComponent, ref } von 'vue';
exportiere StandarddefiniereKomponente({
    Name: 'Geschenk',
    aufstellen() {
        const Zähler = ref(0);
        zurückkehren {
            Schalter
        }
    }
})

Zu diesem Zeitpunkt besteht bei den meisten Anfängern möglicherweise Zweifel, ob sie die Schreibmethode der Optionen-API definieren können, z. B. Daten, Berechnungen, Überwachung, Methoden usw.

Ich muss hier klarstellen, dass Vue3 vollständig mit der Methode zum Schreiben der Options-API von Vue2 kompatibel ist, theoretisch ist zum Schreiben unserer Komponenten jedoch die Setup-Methode empfehlenswerter. Die Gründe sind folgende: Die Existenz von Vue3 selbst dient dazu, die Probleme von Vue2 zu lösen. Das Problem von Vue2 besteht darin, dass es keine Aggregation gibt, was dazu führt, dass der Code immer aufgeblähter wird! Die Setup-Methode kann Daten, Methodenlogik, Abhängigkeiten usw. zusammenfassen und so die Wartung vereinfachen.

Mit anderen Worten, wir sollten in Zukunft versuchen, keine separaten Daten, Berechnungen, Überwachungen, Methoden usw. zu schreiben. Es ist nicht so, dass Vue3 dies nicht unterstützt, aber es widerspricht dem Konzept von Vue3.

Die Komponenteneigenschaft, also die Unterkomponenten einer Komponente, unterscheidet sich zwischen Vue2 und 3 kaum. Vue3 verwendet sie noch immer auf die gleiche Weise wie Vue2.

1. Was ist der Unterschied zwischen Ref und Reaktiv?

In Bezug auf die Funktionalität können sowohl ref als auch reactive reaktionsfähige Daten realisieren!

Auf grammatikalischer Ebene gibt es Unterschiede zwischen beiden. Die durch ref definierten responsiven Daten müssen mit [data].value geändert werden; die durch reactive definierten Daten müssen mit [data].[property] geändert werden.

const actTitle: Ref<string> = ref('Aktivitätsname');

const actData = reaktiv({
    Liste: [],
    gesamt: 0,
    aktuelleSeite: 1,
    Seitengröße: 10
});

actTitle.value = 'Aktivitätsname 2';

actData.total = 100;

Auf Anwendungsebene gibt es jedoch immer noch Unterschiede. Im Allgemeinen verwenden wir für einen einzelnen gemeinsamen Datentyp ref, um die Reaktionsfähigkeit zu definieren. In Formularszenarien wird „reaktiv“ verwendet, um Objekte wie Schlüssel:Wert eines Formulars zu beschreiben. In einigen Szenarien wird auch ein Datensatz eines Moduls reaktiv definiert.

Müssen Objekte also reaktiv definiert werden? Eigentlich nicht, beides ist in Ordnung. Sie sollten spezifische Probleme entsprechend Ihren eigenen Geschäftsszenarien analysieren! ref betont die Änderung des Werts von Daten, während reactive die Änderung einer Eigenschaft des definierten Objekts betont.

2. Periodische Funktionen

In Vue3 werden periodische Funktionen wie folgt separat verwendet:

importiere { defineComponent, ref, onMounted } von „vue“;
exportiere StandarddefiniereKomponente({
    Name: 'Geschenk',
    aufstellen() {
        const Zähler = ref(0);
        beimMounted(() => {
            //Geschäftlich abwickeln, generell Datenanfragen stellen})
        zurückkehren {
            Schalter
        }
    }
})

3. Nutzung des Shops

In Vue2 können Sie es tatsächlich direkt über this.$store abrufen, in Vue3 gibt es hierfür jedoch eigentlich kein Konzept und die Verwendung ist wie folgt:

importiere { useStore } von "vuex";
importiere { defineComponent, ref, berechnet } von „vue“;
exportiere StandarddefiniereKomponente({
    Name: 'Geschenk',
    aufstellen() {
        const Zähler = ref(0);
        const store = useStore();
        const storeData = computed(() => store); // Arbeiten Sie mit computed zusammen, um den Wert von store zu erhalten.
        zurückkehren {
            Schalter,
            storeData
        }
    }
})

4. Nutzung des Routers

In Vue2 erfolgt die funktionale Programmierung des Routings über this.$router, in Vue3 wird es jedoch folgendermaßen verwendet:

importiere { useStore } von "vuex";
importiere { useRouter } von "vue-router";
importiere { defineComponent, ref, berechnet } von „vue“;
exportiere StandarddefiniereKomponente({
    Name: 'Geschenk',
    aufstellen() {
        const Zähler = ref(0);
        const router = useRouter();
        const beiKlick = () => {
            router.push({ name: "Geschenk hinzufügen" });
        }
        zurückkehren {
            Schalter,
            bei Klick
        }
    }
})

2. Trennung der Belange

Die Trennung der Belange kann auf zwei Arten verstanden werden: Die erste Bedeutung besteht darin, dass das Setup von Vue3 selbst verwandte Daten und Verarbeitungslogik zusammenführt, was eine Art Aggregation der Belange darstellt und uns das Lesen von Geschäftscodes erleichtert.

Die zweite Bedeutung besteht darin, dass wir, wenn das Setup größer wird, einen verwandten Geschäftsteil innerhalb des Setups extrahieren und die zweite Ebene der Trennung der Belange erreichen können.

importiere { useStore } von "vuex";
importiere { useRouter } von "vue-router";
importiere { defineComponent, ref, berechnet } von „vue“;
importiere useMerchantList aus „./merchant.js“;
exportiere StandarddefiniereKomponente({
    Name: 'Geschenk',
    aufstellen() {
        const Zähler = ref(0);
        const router = useRouter();
        const beiKlick = () => {
            router.push({ name: "Geschenk hinzufügen" });
        }
        // In diesem Beispiel trennen wir das Geschäft des Abrufens der Händlerliste. Das ist der folgende Händler.ts
        const {merchantList} = useMerchantList();
        zurückkehren {
            Schalter,
            beim Klicken,
            Händlerliste
        }
    }
})

Händler.ts

importiere { getMerchantlist } von "@/api/rights/gift";
importiere { ref, onMounted } von "vue";

Export-Standardfunktion useMerchantList(): Datensatz<Zeichenfolge, beliebig> {
  const merchantList = ref([]);
  const fetchMerchantList = async () => {
    let res = warte auf getMerchantlist({});
    HändlerList.value = res?.data?.child;
  };

  onMounted(fetchMerchantList);

  zurückkehren {
    Händlerliste
  };
}

3. TypeScript-Unterstützung

Genauer gesagt handelt es sich bei diesem Teil des Inhalts um den Inhalt von TS, er hängt jedoch eng mit der Entwicklung des Vue3-Projekts zusammen. Wenn wir Vue3 also wirklich verwenden möchten, müssen wir die Verwendung von TS noch verstehen.

In diesem Teil werde ich jedoch nicht die grundlegende Syntax von TS vorstellen, sondern hauptsächlich darauf eingehen, wie TS in Geschäftsszenarien organisiert wird.

Wenn Sie TS für die Geschäftsentwicklung verwenden, besteht eine Kernidee darin, sich zuerst auf die Datenstruktur zu konzentrieren und dann die Seite basierend auf der Datenstruktur zu entwickeln. Das bisherige Front-End-Entwicklungsmodell bestand darin, zuerst die Seite zu schreiben und sich dann auf die Daten zu konzentrieren.

Wenn wir beispielsweise eine Geschenklistenseite schreiben möchten, müssen wir möglicherweise einige Schnittstellen definieren. Kurz gesagt, wir müssen auf Folgendes achten: die Schnittstelle der Seitendaten, den von der Schnittstelle zurückgegebenen Datentyp, den Eingabeparametertyp der Schnittstelle usw.

// Jedes Element beim Erstellen, Bearbeiten und Auflisten von Geschenken ist von diesem Datentyp.
Schnittstelle IGiftItem {
  ID: Zeichenfolge | Zahl;
  Name: Zeichenfolge;
  Beschreibung: Zeichenfolge;
  [Schlüssel: Zeichenfolge]: beliebig;
}

// Globale entsprechende Typdefinition // Und im Allgemeinen sind wir uns nicht sicher, welcher Typ von der Schnittstelle zurückgegeben wird (es kann null sein, es kann ein Objekt sein oder es kann ein Array sein), also verwenden wir den generischen Typ, um die Schnittstelle zu definieren
Schnittstelle IRes<T> {
    Kennziffer;
    msg: Zeichenfolge;
    Daten: T
}
//Schnittstelle gibt Datentypdefinition zurück Schnittstelle IGiftInfo {
    Liste: Array<IGiftItem>;
    Seitennummer: Nummer;
    Seitengröße: Zahl;
    Gesamt: Anzahl;
}

In einer gemeinsamen Schnittstellenanforderung verwenden wir im Allgemeinen TS, um eine Datenanforderung, den Anforderungstyp der Datenanforderung und den Res-Typ der Datenanforderung zu definieren.

exportiere const getGiftlist = (
  Parameter: Datensatz<Zeichenfolge, beliebig>
): Versprechen<IRes<IGiftInfo>> => {
  gibt Http.get("/apis/gift/list", Parameter) zurück;
};

Zusammenfassen

Dies ist das Ende dieses Artikels über die praktische Entwicklung von Vue3 kombiniert mit TypeScript-Projekten. Weitere relevante Inhalte zur Entwicklung von Vue3 kombiniert mit TS-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!