javascript / expert
Snippet
Automatische Seiteneffekt-Entsorgung mit onWatcherCleanup
Vue 3.5 führte onWatcherCleanup ein, um das Management von Seiteneffekten in Watchern zu vereinfachen. Zuvor wurde das Cleanup über einen Parameter im Watch-Callback gehandhabt. Diese neue eigenständige Funktion ermöglicht eine sauberere Logik, insbesondere bei der Verwendung von async/await oder beim Auslagern von Cleanup-Logik in Hilfsfunktionen. Sie stellt sicher, dass veraltete Anfragen oder Event-Listener entsorgt werden, bevor der Watcher erneut auslöst.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { watch, onWatcherCleanup } from 'vue';watch(id, (newId) => {const controller = new AbortController();fetch(`/api/data/${newId}`, { signal: controller.signal }).then(res => res.json()).then(data => /* handle data */ {});// Vue 3.5+: cleanup runs before the next watch execution or component unmountonWatcherCleanup(() => {controller.abort();});});
vue
Erklärung
1
onWatcherCleanup(() => {
Registriert eine Cleanup-Funktion speziell für die aktuelle Ausführung des Watcher-Effekts.
2
controller.abort();
Stoppt die vorherige Fetch-Anfrage, um Race Conditions zu verhindern, wenn sich die 'id' schnell ändert.