VueJS - Berechnete Eigenschaften: Ein Anfängerleitfaden

Hallo da draußen, zukünftiger Vue.js-Superstar! Heute machen wir uns auf eine aufregende Reise in die Welt der berechneten Eigenschaften in Vue.js. Mach dir keine Sorgen, wenn du neu im Programmieren bist – ich werde dein freundlicher Guide sein, und wir gehen das Schritt für Schritt durch. Am Ende dieses Tutorials wirst du erstaunt sein, wie viel du gelernt hast!

Was sind berechnete Eigenschaften?

Stell dir vor, du backst einen Kuchen. Du hast Zutaten (Daten) und folgst einem Rezept (Logik), um etwas Leckeres zu zaubern (berechnete Eigenschaft). In Vue.js sind berechnete Eigenschaften wie magische Kuchenrezepte, die automatisch aktualisiert werden, wenn ihre Zutaten sich ändern!

Lassen wir mit einem einfachen Beispiel beginnen:

<template>
<div>
<p>Vorname: {{ firstName }}</p>
<p>Nachname: {{ lastName }}</p>
<p>Volle Name: {{ fullName }}</p>
</div>
</template>

<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}
</script>

In diesem Beispiel ist fullName unsere berechnete Eigenschaft. Es ist wie ein kluges Rezept, das firstName und lastName kombiniert, um uns einen vollständigen Namen zu geben. Das Beste daran? Wenn firstName oder lastName sich ändern, aktualisiert sich fullName automatisch!

Warum berechnete Eigenschaften verwenden?

1. Einfachheit: Sie halten dein Template sauber und leicht lesbar.
2. Leistung: Vue cacht das Ergebnis und berechnet es nur neu, wenn Abhängigkeiten sich ändern.
3. Verlässlichkeit: Sie aktualisieren automatisch, wenn ihre Abhängigkeiten sich ändern.

Berechnete Eigenschaften vs. Methoden

"Aber wartet," magst du sagen, "könnten wir nicht einfach eine Methode verwenden?" Great Frage! Lassen wir vergleichen:

<template>
<div>
<p>Berechnet: {{ reversedMessage }}</p>
<p>Methode: {{ reverseMessage() }}</p>
</div>
</template>

<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
},
methods: {
reverseMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>

Sowohl reversedMessage als auch reverseMessage() tun dasselbe. Aber hier ist das Geheimnis: Berechnete Eigenschaften werden gecacht. Wenn message sich nicht ändert, wird reversedMessage nicht neu berechnet. Es ist, als hättest du einen super-effizienten Assistenten, der frühere Ergebnisse pamięta!

Berechnete Eigenschaften mit Abhängigkeiten

Berechnete Eigenschaften glänzen, wenn sie von mehreren Daten abhängen. Sehen wir uns ein komplexeres Beispiel an:

<template>
<div>
<input v-model="searchQuery" placeholder="Suche todos">
<ul>
<li v-for="todo in filteredTodos" :key="todo.id">{{ todo.text }}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
searchQuery: '',
todos: [
{ id: 1, text: 'Vue lernen', completed: false },
{ id: 2, text: 'Eine App bauen', completed: true },
{ id: 3, text: 'Berechnete Eigenschaften beherrschen', completed: false }
]
}
},
computed: {
filteredTodos() {
return this.todos.filter(todo =>
todo.text.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>

Hier ist filteredTodos wie ein kluger Filter. Es beobachtet sowohl todos als auch searchQuery. Wenn einer von ihnen sich ändert, aktualisiert es die Liste automatisch. Magisch, oder?

Get/Set in berechneten Eigenschaften

Jetzt, lasst uns aufstocken! Berechnete Eigenschaften können sowohl einen Getter als auch einen Setter haben. Es ist wie ein zwei-Wege-Rezept – du kannst das Ergebnis lesen und die Zutaten ändern!

<template>
<div>
<p>Volle Name: {{ fullName }}</p>
<button @click="changeFullName">Name ändern</button>
</div>
</template>

<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(newValue) {
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
},
methods: {
changeFullName() {
this.fullName = 'Jane Smith'
}
}
}
</script>

In diesem Beispiel ist fullName nicht nur ein Rezept (Getter), sondern auch ein umgekehrtes Rezept (Setter). Wenn wir fullName ändern, aktualisiert es automatisch firstName und lastName. Es ist wie eine magische Namensänderungstränke!

Berechnete Eigenschaftsmethoden

Lassen wir mit einer Tabelle der häufigsten Methoden, die du in berechneten Eigenschaften verwenden kannst, abschließen:

Methode	Beschreibung	Beispiel
filter()	Erstellt ein neues Array mit Elementen, die einen Test bestehen	this.items.filter(item => item.price > 100)
map()	Erstellt ein neues Array durch Transformation jedes Elements	this.items.map(item => item.name.toUpperCase())
reduce()	Reduziert ein Array auf einen einzigen Wert	this.items.reduce((total, item) => total + item.price, 0)
sort()	Sortiert die Elemente eines Arrays	this.items.sort((a, b) => a.price - b.price)
includes()	Prüft, ob ein Array ein bestimmtes Element enthält	this.items.includes('apple')
find()	Gibt das erste Element zurück, das einen Test besteht	this.items.find(item => item.id === 3)

Denke daran, diese Methoden verändern nicht das Originalarray, was perfekt für berechnete Eigenschaften ist!

Und das war's, meine neugierigen Lernenden! Du hast gerade die Kunst der berechneten Eigenschaften in Vue.js gemeistert. Von einfachen Berechnungen bis hin zu komplexen Filtern, du hast die Macht, deine Vue-Anwendungen intelligenter und effizienter zu machen. Bleib amüsiert, bleib coden und vor allem, habe Spaß mit Vue!

Credits: Image by storyset