javascript / expert
Snippet
Reaktivitäts-Debugging via onTrack und onTrigger Hooks
Vues watchEffect (und watch) akzeptieren ein Optionsobjekt mit den Hooks onTrack und onTrigger. Diese sind entscheidend für Performance-Audits und Debugging auf Expertenniveau. onTrack wird ausgeführt, wenn auf eine reaktive Abhängigkeit innerhalb des Effekts zugegriffen wird, während onTrigger läuft, wenn eine Mutation die erneute Ausführung des Effekts auslöst. Dies ermöglicht es Entwicklern, genau zu identifizieren, warum eine teure Berechnung ausgeführt wird.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { watchEffect, ref } from 'vue';const count = ref(0);watchEffect(() => console.log('Current count:', count.value),{onTrack(e) {// Triggered when count.value is tracked as a dependencyconsole.log('Dependency tracked:', e.key);},onTrigger(e) {// Triggered when count.value mutation triggers the effectconsole.log('Effect triggered by:', e.type, 'on', e.key);debugger;}});
vue
Erklärung
1
onTrack(e) {
Lifecycle-Hook, der ausgelöst wird, wenn eine reaktive Eigenschaft zum ersten Mal als Abhängigkeit erfasst wird.
2
onTrigger(e) {
Lifecycle-Hook, der unmittelbar vor der erneuten Ausführung des Effekts aufgrund einer Abhängigkeitsänderung feuert.
3
debugger;
Pausiert die Ausführung innerhalb von onTrigger, um das Event-Objekt und den Call-Stack der Mutation zu inspizieren.