Einfach und effektiv: 10 Best Practices für Vue 3 mit Composition API

Vue.js hat sich schnell zu einem der beliebtesten JavaScript-Frameworks entwickelt, und mit der Einführung von Vue 3 und der Composition API hat es noch mehr an Flexibilität und Effizienz gewonnen. In diesem Artikel werden wir zehn Best Practices für die Arbeit mit Vue 3 und der Composition API durchgehen.

1. Nutzen Sie die Composition API für komplexe Komponenten

Die Composition API ist ein neues Feature in Vue 3, das uns hilft, unseren Code besser zu organisieren. Stellen Sie sich vor, Sie haben eine große Webseite mit vielen Teilen. Mit der Composition API können Sie jeden Teil in eine eigene Funktion auslagern. Das macht Ihren Code sauberer und einfacher zu verstehen.

<script setup>import { ref } from 'vue'const count = ref(0)function increment() {  count.value++}</script><template>  </template>

2. Nutzen Sie <script setup> für eine klarere Struktur

Mit Vue 3 gibt es eine neue Möglichkeit, unseren Code zu schreiben: <script setup>. Mit <script setup> können wir unseren Code direkt schreiben, ohne eine Setup-Funktion zu benötigen. Das macht unseren Code kürzer und einfacher zu lesen.

<script setup>import { ref } from 'vue'const message = ref('Hello, Vue 3!')</script><template>  <p>{{ message }}</p></template>

Traditionelle setup-Funktion:

<script>import { ref } from 'vue'export default {  setup() {    const message = ref('Hello, Vue 3!')    return {      message    }  }}</script><template>  <p>{{ message }}</p></template>

Wie Sie sehen können, ist der Code mit <script setup> kürzer und einfacher zu lesen. Mit <script setup> müssen wir die setup-Funktion nicht explizit deklarieren und das return-Statement nicht verwenden. Stattdessen können wir die Variablen direkt deklarieren und sie werden automatisch der Vorlage zur Verfügung gestellt. Dies führt zu einem saubereren und übersichtlicheren Code, was besonders bei größeren Projekten hilfreich ist.

3. Nutzen Sie ref und reactive effektiv

In Vue 3 gibt es zwei wichtige Funktionen, ref und reactive. Mit ref können wir einfache Werte wie Zahlen oder Texte speichern. Mit reactive können wir komplexere Dinge wie Listen oder Objekte speichern.

<script setup>import { ref, reactive } from 'vue'const count = ref(0)const user = reactive({ name: 'John', age: 30 })</script>

4. Nutzen Sie watch und watchEffect für Seiteneffekte

Manchmal möchten wir, dass etwas passiert, wenn sich ein Wert ändert. Zum Beispiel möchten wir vielleicht den Titel unserer Webseite ändern, wenn sich eine Zahl ändert. Dafür können wir watch oder watchEffect verwenden.

<script setup>import { ref, watchEffect } from 'vue'const count = ref(0)watchEffect(() => {  document.title = `Count is ${count.value}`})</script>

5. Nutzen Sie computed für abgeleitete Zustände

Manchmal haben wir Werte, die von anderen Werten abhängen. Zum Beispiel möchten wir vielleicht wissen, ob eine Zahl gerade oder ungerade ist. Dafür können wir computed verwenden.

<script setup>import { ref, computed } from 'vue'const count = ref(0)const isEven = computed(() => count.value % 2 === 0)</script><template>  <p>Count is {{ isEven ? 'even' : 'odd' }}</p></template>

6. Nutzen Sie provide und inject für die Dependency Injection

Manchmal möchten wir Daten zwischen verschiedenen Teilen unserer Webseite teilen. Dafür können wir provide und inject verwenden. Mit provide können wir Daten zur Verfügung stellen, und mit inject können wir diese Daten an anderer Stelle abrufen.

// Parent.vue<script setup>import { provide, ref } from 'vue'const theme = ref('dark')provide('theme', theme)</script>

// Child.vue<script setup>import { inject } from 'vue'const theme = inject('theme')</script><template>  <p>Current theme: {{ theme }}</p></template>

7. Nutzen Sie v-model für Zwei-Wege-Datenbindung

Mit v-model können wir Daten zwischen unserem Code und unserer Webseite hin- und herbewegen. Stellen Sie sich vor, Sie haben ein Eingabefeld auf Ihrer Webseite und möchten den Text darin speichern. Mit v-model können wir das ganz einfach machen.

<script setup>import { ref } from 'vue'const name = ref('')</script><template>  <input v-model="name" placeholder="Enter your name"></template>

8. Nutzen Sie v-for mit :key für Listenrendering

Mit v-for können wir Listen auf unserer Webseite anzeigen. Und mit :key können wir Vue helfen, die Liste effizient zu verwalten.

<script setup>import { ref } from 'vue'const items = ref(['Apple', 'Banana', 'Cherry'])</script><template>  <ul>      </ul></template>

9. Nutzen Sie v-if / v-else-if / v-else für bedingtes Rendering

Manchmal möchten wir Teile unserer Webseite nur unter bestimmten Bedingungen anzeigen. Dafür können wir v-if, v-else-if und v-else verwenden.

<script setup>import { ref } from 'vue'const isLoggedIn = ref(false)</script><template>  <div v-if="isLoggedIn">Welcome back!</div>  <div v-else>Please log in.</div></template>

10. Teilen Sie Ihren Code in Komponenten

Eine der größten Stärken von Vue.js ist die Möglichkeit, Ihren Code in wiederverwendbare Komponenten zu teilen. Jede Komponente repräsentiert einen Teil Ihrer Benutzeroberfläche und kann unabhängig von den anderen Teilen Ihrer Anwendung funktionieren.

// Greeting.vue<script setup>const greeting = 'Hello, Vue 3!'</script><template>  <p>{{ greeting }}</p></template>

Sie können diese Komponente dann in einer anderen Komponente verwenden:

// App.vue<script setup>import Greeting from './Greeting.vue'</script><template>  <Greeting /></template>

Das Teilen Ihres Codes in Komponenten hat mehrere Vorteile:

Wiederverwendbarkeit: Sie können die gleiche Komponente an mehreren Stellen in Ihrer Anwendung verwenden, ohne den Code duplizieren zu müssen.
Lesbarkeit: Indem Sie Ihren Code in kleinere, selbst enthaltene Einheiten aufteilen, wird Ihr Code einfacher zu lesen und zu verstehen.
Wartbarkeit: Wenn jede Komponente unabhängig ist, können Sie eine Komponente ändern oder aktualisieren, ohne den Rest Ihrer Anwendung zu beeinflussen.

Das Teilen Ihres Codes in Komponenten ist eine grundlegende Best Practice in Vue.js und sollte in jeder Vue-Anwendung angewendet werden.

Das waren die zehn einfachen Tipps für die Arbeit mit Vue 3 und der Composition API. Ich hoffe, sie helfen Ihnen dabei, bessere Webseiten zu erstellen. Viel Spaß beim Codieren!