javascript / intermediate
Snippet
Schreibbare berechnete Eigenschaften mit Gettern und Settern
Obwohl berechnete Eigenschaften normalerweise schreibgeschützt sind, können Sie schreibbare Eigenschaften erstellen, indem Sie sowohl einen Getter als auch einen Setter bereitstellen. Dies ist nützlich für Komponenten, die zwischen formatierter Anzeige und Rohdaten vermitteln müssen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
const firstName = ref('John');const lastName = ref('Doe');const fullName = computed({get() {return `${firstName.value} ${lastName.value}`;},set(newValue) {const names = newValue.split(' ');firstName.value = names[0] || '';lastName.value = names[names.length - 1] || '';}});
vue
Erklärung
1
get() { ... }
Gibt den abgeleiteten Wert zurück, der im Template oder in anderer Logik verwendet wird.
2
set(newValue) { ... }
Führt Logik aus, wenn der berechneten Eigenschaft ein neuer Wert zugewiesen wird.
3
firstName.value = names[0]
Aktualisiert den zugrunde liegenden reaktiven Zustand basierend auf der Eingabe in den Setter.