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!