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>

   Nach dem Login kopieren

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>

   Nach dem Login kopieren

3. Führen Sie das Projekt aus

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

   npm run dev

   Nach dem Login kopieren

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

   Nach dem Login kopieren

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

   Nach dem Login kopieren

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

   Nach dem Login kopieren
   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!