Vue3 + TypeScript-Entwicklungszusammenfassung

Vue3 + TypeScript lernen

1. Umgebungskonfiguration

1.1 Installieren Sie das neueste Vue-Gerüst

npm install -g @vue/cli
globales Garn-Add @vue/cli

1.2 Erstellen Sie ein Vue3-Projekt

vue erstellt Projektname

1.3 Upgrade bestehender Vue 2-Projekte auf Vue 3

vue Typoskript hinzufügen

2. Angriff auf Vue3

2.1 Vue 2 Einschränkungen

1. Wenn Komponenten und ihre Abhängigkeiten größer werden, werden die Komponenten schwieriger zu lesen und zu warten.
2. Es gibt keine perfekte Lösung für die komponentenübergreifende Wiederverwendung von Code

2.2 Wie Vue 3 die Einschränkungen von Vue 2 löst

1. Komponenten sind schwierig zu warten und zu verwalten
   

[Schreiben Sie eine zusammengesetzte Funktion in Vue3 und verwenden Sie Compositon Api setUp, um sie zu lösen]

1. Es gibt keine perfekte Lösung für die komponentenübergreifende Wiederverwendung von Code

3. Vue3-Kompositions-API

3.1 Informationen zur Composition API

In Vue3 können Sie Komponenten auch ohne Verwendung Composition Api schreiben. Es ist lediglich eine weitere Möglichkeit, Komponenten in Vue3 zu schreiben, die viele Vorgänge intern vereinfacht.

Sie können also weiterhin die Vue2-Methode zum Schreiben von Komponenten verwenden.

3.2 Wann Sie die Composition API verwenden sollten

TypeScript unterstützt das Schreiben großer Komponenten. Sie können Composition Api API verwenden, um den Status zu verwalten und Code komponentenübergreifend wiederzuverwenden.

4. Wesentliche Grundlagen der Composition API

4.1 Was ist setup

Setup ist eine weitere Implementierung zum Konfigurieren des Komponentenstatus.

Der im Setup definierte Status, den die Methode zurückgeben muss, wenn sie in der Vorlage verwendet werden soll

Beachten:

• Die Setup-Methode wird vor Komponenten, Props, Datenmethoden und berechneten Lebenszyklusmethoden ausgeführt.
• Gleichzeitig ist der Zugriff darauf im Setup nicht möglich.

4.2 ref Erstellen von responsiven Variablen

In Vue2 definieren wir eine reaktionsfähige Variable direkt in den Daten und verwenden die Variable in der Vorlage. Wenn wir die Kompositions-API verwenden, müssen wir im Setup mithilfe von „ref“ eine reaktionsfähige Variable erstellen und zurückgeben, bevor wir sie auf der Seite verwenden können.

verwenden:

• Importieren Sie ref import { ref } von 'vue'
• Anfangsvariable const name = ref('Standardwert angeben')
• Rückgabevariable return { name } Sie können auch Methoden in return zurückgeben
• Um auf den Wert einer im Setup definierten Variable zuzugreifen, können Sie ihn nicht direkt über den Variablennamen abrufen. Sie müssen Variablenname.Wert verwenden, um das Objekt und den Wert abzurufen.

Die Vorteile davon:

• Der Status ist einfach zu verwalten. Sie können ihn in mehrere Setup-Statusverwaltungen aufteilen und schließlich alles in eine Datei importieren und verwenden.

<Vorlage>
    <div>
        <h1>{{title}}</h1>
    </div>
</Vorlage>

<Skript>
importiere {ref,defineComponent} aus 'vue'
exportiere StandarddefiniereKomponente({
    aufstellen () {
        //Responsive Variablen definieren const title = ref('Front-End-Community zum Selbststudium')
        
          // Zugriff auf die Variable console.log(title.value)
        // Variable zurückgeben return {title}
    }
})
</Skript>

4.3 Lebenszyklus

Die Lebenszyklus-Hooks der Composition API haben den gleichen Namen wie die optionalen Lebenszyklus-Hooks von Vue 2, mit der Ausnahme, dass ihnen bei Verwendung der Composition API die Präfixe „on“, „onMounted“ vorangestellt sind.

Im folgenden Code gibt es zwei bereitgestellte Life-Hooks. Welcher wird Ihrer Meinung nach zuerst ausgeführt?

setup wird zuerst ausgeführt

aufstellen () {
        //Responsive Variablen definieren const title = ref('Front-End-Community zum Selbststudium')
        console.log(Titel)
        // Rückgabevariable Funktion getTitle(){
            console.log(Titel.Wert)
        }
        // Die Seite wird geladen onMounted(getTitle)
        return {Titel}
    },
    montiert() {
        console.log('Testen Sie die gemountete Ausführungsreihenfolge')
    },

4.4 Uhr

Mit der Uhr auf Änderungen im Setup reagieren

1. Uhr importieren, { Uhr } aus 'vue' importieren

2. Verwenden Sie die Uhr direkt. Die Uhr akzeptiert 3 Parameter

1. Eine reaktive Referenz- oder Getter-Funktion zum Abhören von Updates
2. Ein Rückruf zum Ausführen des Aktualisierungsvorgangs
3. Optionale Konfigurationselemente

importiere {wathc} von 'vue'

//Responsive Variablen definieren const num = ref(0)
// Aktualisiere responsive Variablen Funktion changeNum(){
            Anzahl.Wert++
}

// wathc überwacht die responsive Variable watch(
 Num, (neuerWert, alterWert) => {
 console.log(`neuer Wert ist: ${newValue},--------alter Wert ist: ${oldValue}`)
   }
 )

4,5 berechnet

Es wird auch aus Vue importiert, und die berechnete Funktion gibt eine schreibgeschützte reaktive Referenz auf die Ausgabe des getter-ähnlichen Rückrufs zurück, der als erstes Argument an „Berechnet“ übergeben wurde. Um auf den Wert der neu erstellten berechneten Variable zuzugreifen, müssen wir die Eigenschaft .value verwenden, genau wie wir es bei einem Verweis getan haben.

Wenn sich der Wert von num ändert, wird der Wert von nums *3 sein.

importiere {ref,computed} von „vue“;

Konstante Nummer = Ref(0)

// Aktualisiere Nummer
Funktion changeNum(){
   Anzahl.Wert++
 }
//Anzahl Änderungen überwachen const nums = computed(() =>{
  Rückgabewert * 3
 })

5. Einrichtung

5.1 Akzeptieren von zwei Parametern

props: Die von der übergeordneten Komponente übergebenen Eigenschaften. Die Props in der Setup-Funktion reagieren. Sie werden aktualisiert, wenn die Daten aktualisiert werden, und ES6-Destrukturierung kann nicht verwendet werden, da dadurch die Props nicht reagieren.

Kontext: Es ist ein normales Objekt, das · property 3 Komponenten offenlegt

1. Attribut
2. Spielautomaten
3. Auslösende Ereignisse

context reagiert nicht, daher können Sie die Destrukturierung ES6 verwenden, um das Schreiben zu vereinfachen.

Requisiten:{
        obj:{
            Typ:Objekt
        }
    },
     Setup (Eigenschaften, {Attribute, Slots, Emit}) {
            console.log(Attribute)
            Konsole.log(Slots)
            console.log(ausgeben)
             Konsole.log(Eigenschaften.obj)
     }

5.2 Hinweise zum Laden des Komponenten setup

Wenn eine Komponente setup ausführt, wird die Komponenteninstanz nicht erstellt. Daher kann auf die folgenden Eigenschaften nicht zugegriffen werden

• Daten
• berechnet
• Methoden

6. Lebenszyklus

Bei Verwendung des Lebenszyklus im setup muss das Präfix on.

7. Werte zwischen Komponenten übertragen

In Vue 2 können wir Provide/Inject verwenden, um Werte zwischen Komponenten zu übergeben, und dies ist auch in Vue 3 möglich.

Wird im setup verwendet und muss aus vue importiert werden.

Bei Verwendung von Provide ist es im Allgemeinen auf Responsive Update eingestellt, sodass bei einer Änderung der übergeordneten Komponente auch die untergeordneten Komponenten und abgeleiteten Komponenten aktualisiert werden.

Wie richte ich es für reaktionsschnelle Updates ein?

1. Verwenden Sie ref / reactive, um reaktionsfähige Variablen zu erstellen
2. Verwenden Sie provide('name', 'zu übergebende Antwortvariable').
3. Fügen Sie abschließend ein Ereignis zum Aktualisieren der Reaktionsvariablen hinzu, sodass beim Aktualisieren der Reaktionsvariablen auch die Variablen im Angebot aktualisiert werden.

Übergeordnete Komponente:

importiere { bereitstellen, Komponente definieren, ref, reaktiv} von "vue";

<Vorlage>
  
  <Sohn/>
  
</Vorlage>


<Skript>
    importiere { bereitstellen, Komponente definieren, ref, reaktiv} von "vue";
    exportiere StandarddefiniereKomponente({
    aufstellen() {
            const father = ref("meine übergeordnete Komponente");
    const info = reaktiv({
      Ich würde: 23,
      Nachricht: „Frontend-Community zum Selbststudium“,
    });
    Funktion changeProvide(){
      info.message = "Test"
    }
    bereitstellen('Vater',Vater)
    bereitstellen('Info',Info)
    gibt {changeProvide} zurück;
    }
    
})
</Skript>

Unterkomponenten:

<Vorlage>
    <div>
        <h1>{{info.message}}</h1>
        <h1>{{VaterDaten}}</h1>
    </div>
</Vorlage>

<Skript>
importiere {bereitstellen, definieren, komponente, ref, reaktiv, injizieren} aus 'vue'
exportiere StandarddefiniereKomponente({
    aufstellen () {
        const VaterData = inject('Vater')
        const info = injizieren('info')
        
        returniere {Vaterdaten,Info}
    }
})
</Skript>

8. Tipps zur Verwendung von TypeScript in Vue

8.1 Schnittstellenbeschränkungen Einschränkungsattribute

Durch die Verwendung der Eigenschaften von TypeScirpt , Typzusicherung + Schnittstelle werden die Eigenschaften perfekt eingeschränkt

Schnittstelle

Überprüfung des Attributtyps von Paging-Abfragefeldern:

exportiere Standardschnittstelle queryType{
    Seitenzahl,
    Größe: Anzahl,
    Name: Zeichenfolge,
    Alter: Anzahl
}

Wird in Komponenten verwendet:

importiere Abfragetyp aus '../interface/Home'


    Daten() {
        zurückkehren {
            Abfrage:{
                Seite:0,
                Größe: 10,
                Name: 'Test',
                Alter: 2
            } als Abfragetyp
        }
    },

8.2 Komponenten werden mit defineComponent definiert

Auf diese Weise leitet TypeScript die Typen in den Vue-Komponentenoptionen korrekt ab

importiere { defineComponent } von 'vue'

exportiere StandarddefiniereKomponente({
    aufstellen(){
        zurückkehren{ }
    }
})

8.3 Reaktive Typdeklarationen

Standardschnittstelle exportieren Produkt {
    Name:Zeichenfolge,
    Preis:Anzahl,
    Adresse:String
}

 

Produkt aus '@/interface/Product' importieren 
importiere {reaktiv} von 'vue'
const product = reactive({name:'xiaomi 11',price:5999,address:'北京'}) als Produkt
       
returniere {Vaterdaten,Info,Produkt}

Oben finden Sie den detaillierten Inhalt der Vue3 + TypeScript-Entwicklungszusammenfassung. Weitere Informationen zu Vue3 + TypeScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!