javascript / intermediate
Snippet
Wiederverwendbare Logik mit Composables
Composables sind Funktionen, die Vues Composition API nutzen, um zustandsabhängige Logik zu kapseln und komponentenübergreifend wiederzuverwenden. Sie ersetzen ältere Muster wie Mixins, indem sie bessere Typsicherheit bieten und Namensraum-Kollisionen verhindern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { ref, onMounted, onUnmounted } from 'vue';export function useMouse() {const x = ref(0);const y = ref(0);function update(event) {x.value = event.pageX;y.value = event.pageY;}onMounted(() => window.addEventListener('mousemove', update));onUnmounted(() => window.removeEventListener('mousemove', update));return { x, y };}
vue
Erklärung
1
const x = ref(0);
Initialisiert eine reaktive Referenz für die horizontale Koordinate.
2
onMounted(() => ...)
Registriert den Event-Listener erst, nachdem die Komponente zum DOM hinzugefügt wurde.
3
onUnmounted(() => ...)
Entfernt den Listener, um Speicherlecks zu vermeiden, wenn die Komponente zerstört wird.