javascript / beginner
Snippet
Optimierung von Berechnungen mit zwischengespeicherten Computed-Werten
Computed-Eigenschaften speichern ihr Ergebnis basierend auf reaktiven Abhängigkeiten zwischen, wodurch teure Array-Reduktionen bei nicht zusammenhängenden Re-Rendern vermieden werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
import { ref, computed } from 'vue';const rawScores = ref([88, 92, 79, 95, 100, 64]);// Performance benefit: computed caches results until dependencies mutateconst averageScore = computed(() => {if (rawScores.value.length === 0) return 0;const total = rawScores.value.reduce((sum, score) => sum + score, 0);return (total / rawScores.value.length).toFixed(1);});
vue
Erklärung
1
const rawScores = ref([88, 92, 79, 95, 100, 64]);
Verwaltet ein reaktives Array von numerischen Testergebnissen.
2
const averageScore = computed(() => {
Erstellt eine zwischengespeicherte computed-Eigenschaft, die nur bei Änderung von rawScores neu berechnet wird.
3
const total = rawScores.value.reduce((sum, score) => sum + score, 0);
Verwendet die native reduce-Methode, um die Summe aller Punktwerte zu berechnen.
4
return (total / rawScores.value.length).toFixed(1);
Teilt die Gesamtsumme durch die Anzahl und gibt einen formatierten Durchschnitts-String zurück.