javascript / intermediate
Snippet
Logik-Kapselung mit Composables
Composables ermöglichen es, zustandsbehaftete Logik in wiederverwendbare Funktionen zu extrahieren. Durch die Verwendung von Vues Lifecycle-Hooks in diesen Funktionen erstellen Sie sauberen, modularen Code, der leicht zu testen und zwischen Komponenten zu teilen ist.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { onMounted, onUnmounted } from 'vue';export function useMousePosition() {const x = ref(0);const y = ref(0);const update = (e) => {x.value = e.pageX;y.value = e.pageY;};onMounted(() => window.addEventListener('mousemove', update));onUnmounted(() => window.removeEventListener('mousemove', update));return { x, y };}
vue
Erklärung
1
export function useMousePosition()
Die Namenskonvention 'use...' kennzeichnet dies als Vue Composable.
2
onUnmounted(() => window.removeEventListener(...))
Wichtig, um Speicherlecks zu verhindern, wenn die Komponente zerstört wird.