Vue3+TS+Vite-Entwicklungstipps: So nutzen Sie die Vue3 Composition API elegant

Vue3+TS+Vite-Entwicklungsfähigkeiten: So nutzen Sie die Vue3 Composition API elegant

Einführung:
Die Einführung von Vue3 hat eine Reihe von Änderungen in der Front-End-Entwicklung mit sich gebracht, eine der größten Änderungen ist die Einführung von Composition API (Composable API). Im Vergleich zur herkömmlichen Options-API können wir mit der Composition-API unseren Code flexibler und effizienter organisieren und verwalten. In diesem Artikel erfahren Sie, wie Sie die Vue3 Composition API elegant nutzen und TypeScript und Vite für die Projektentwicklung kombinieren.

1. Installieren und initialisieren Sie das Projekt
Zuerst müssen wir die neueste Version von Vue CLI installieren, installieren Sie sie über den folgenden Befehl:

npm install -g @vue/cli

Als nächstes können wir Vue CLI verwenden, um ein neues Projekt zu erstellen:

vue create my-project

Wann Beim Erstellen des Projekts können wir TypeScript als Vorlage für das Projekt auswählen. Wenn wir keine Wahl haben, können wir TypeScript-Unterstützung auch manuell hinzufügen:

vue add @vue/typescript

Als Nächstes können wir Vite als Build-Tool des Projekts verwenden und es über den folgenden Befehl installieren:

npm init vite@latest my-vite-project -- --template vue-ts

Auf diese Weise haben wir a erfolgreich installiert und initialisiert Vue3+TS +Vites Projekt.

2. Verwenden Sie die Composition API. Mit der Composition API können Sie unseren Code besser organisieren und unsere Entwicklungseffizienz verbessern. Das Folgende ist ein einfaches Beispiel, um die Verwendung der Composition API zu demonstrieren.

1. Erstellen Sie eine neue Komponente.

   Zuerst können wir eine neue Komponente erstellen, z. B. HelloWorld.vue:
   

   <template>
     <div>{{ message }}</div>
   </template>
   
   <script>
   import { ref, onMounted } from 'vue';
   
   export default {
     setup() {
    const message = ref('Hello, World!');
   
    onMounted(() => {
      setTimeout(() => {
        message.value = 'Hello, Vue3!';
      }, 2000);
    });
   
    return {
      message,
    };
     },
   };
   </script>

In diesem Beispiel verwenden wir die Ref-Funktion in der Composition-API, um eine reaktive Datennachricht zu definieren, und Der Wert der Nachricht wird in der gemounteten Hook-Funktion der Komponente geändert.

2. Komponenten verwenden

   Als nächstes verwenden Sie diese Komponente auf unserer Seite:
   

   <template>
     <div>
    <HelloWorld />
     </div>
   </template>
   
   <script>
   import HelloWorld from './HelloWorld.vue';
   
   export default {
     components: {
    HelloWorld,
     },
   };
   </script>

Führen Sie die HelloWorld-Komponente in die Seite ein und verwenden Sie sie als untergeordnete Komponente.

3. Führen Sie das Projekt aus

   Schließlich können wir das Projekt ausführen und den Effekt sehen:
   

   npm run dev

Anhand dieses einfachen Beispiels können wir sehen, dass die Verwendung der Composition API unseren Code prägnanter und klarer organisieren kann.

3. Häufig verwendete Composition-API-Funktionen

Zusätzlich zu den oben vorgestellten ref- und onMounted-Funktionen gibt es auch einige häufig verwendete Composition-API-Funktionen, die uns bei der Verbesserung helfen können.

1. reaktive Funktion

   Die reaktive Funktion kann ein normales Objekt in ein reaktives Objekt umwandeln und ein reaktives Proxy-Objekt zurückgeben. Das Beispiel lautet wie folgt:
   

   import { reactive } from 'vue';
   
   const state = reactive({
     count: 0,
   });
   
   console.log(state.count); // 输出：0
   
   state.count++;
   console.log(state.count); // 输出：1

Im obigen Beispiel verwenden wir die reaktive Funktion, um einen normalen Objektzustand in ein reaktives Objekt umzuwandeln und über state.count darauf zuzugreifen und es zu ändern.

2. Überwachungsfunktion

   Die Überwachungsfunktion kann Änderungen in reaktionsfähigen Daten überwachen und die entsprechende Rückruffunktion ausführen, wenn sich die Daten ändern. Ein Beispiel ist wie folgt:
   

   import { ref, watch } from 'vue';
   
   const count = ref(0);
   
   watch(count, (newValue, oldValue) => {
     console.log(`count从${oldValue}变为${newValue}`);
   });
   
   count.value++; // 输出：count从0变为1

Im obigen Beispiel verwenden wir die Watch-Funktion, um Änderungen in der Zählvariablen zu überwachen und das entsprechende Protokoll auszugeben, wenn sich die Zählung ändert.

3. toRefs-Funktion

   toRefs-Funktion kann die Eigenschaften eines reaktionsfähigen Objekts in ein normales Ref-Objekt umwandeln und ein neues Objekt zurückgeben. Ein Beispiel ist wie folgt:
   

   import { reactive, toRefs } from 'vue';
   
   const state = reactive({
     count: 0,
   });
   
   const { count } = toRefs(state);
   
   console.log(count.value); // 输出：0
   
   count.value++;
   console.log(count.value); // 输出：1

Im obigen Beispiel verwenden wir die Funktion toRefs, um das Zählattribut im Status in ein normales Ref-Objekt umzuwandeln, sodass wir über count.value darauf zugreifen und es ändern können.

4. Zusammenfassung

Die Einführung der Vue3 Composition API macht unseren Code flexibler und effizienter und kann unseren Code besser organisieren und verwalten. In diesem Artikel wird erläutert, wie Sie die Vue3 Composition API verwenden und Vue3-Projekte mit TypeScript und Vite entwickeln. Durch das Verständnis und die Beherrschung der Verwendung der Composition API können wir Vue3-Projekte eleganter entwickeln und unsere Entwicklungseffizienz verbessern.

Ich hoffe, dieser Artikel kann Ihnen Hilfe und Anleitung zur Verwendung der Composition API in der Vue3-Projektentwicklung geben.

Das obige ist der detaillierte Inhalt vonVue3+TS+Vite-Entwicklungstipps: So nutzen Sie die Vue3 Composition API elegant. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!