javascript / expert
Snippet
Abfangen Reaktiver Array-Batch-Mutationen über Dynamische Proxy-Traps
Vue's shallowReactive Optimierung verfolgt Mutationen auf Root-Ebene, überspringt aber die tief verschachtelte Hülle. Beim Bau tieferer Datenstrukturen ermöglicht das Einbetten von shallowReactive Arrays in einen sekundären ES Proxy Handler das direkte Abfangen von Array-Index-Zuweisungen und Längenänderungen. Reflect.set garantiert die Zielsemantik ohne die Vue-Reaktivität zu beeinträchtigen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { shallowReactive } from 'vue';function createObservedCollection(initialItems = []) {const rawArray = [...initialItems];const reactiveHandle = shallowReactive(rawArray);return new Proxy(reactiveHandle, {set(target, prop, value, receiver) {const isIndex = typeof prop === 'string' && !isNaN(Number(prop));const result = Reflect.set(target, prop, value, receiver);if (isIndex || prop === 'length') {console.log(`Mutation detected on index/length: ${String(prop)}`);}return result;}});}
vue
Erklärung
1
const reactiveHandle = shallowReactive(rawArray);
Erzeugt einen shallow-reaktiven Proxy um das Array, um die Integration mit dem Vue-Dependency-Tracking zu wahren.
2
return new Proxy(reactiveHandle, {
Ummantelt das reaktive Handle mit einem Metaprogrammierung-Proxy zur Abfangung niederpoliger Objektoperationen.
3
const isIndex = typeof prop === 'string' && !isNaN(Number(prop));
Prüft, ob der Eigenschaften-Schlüssel einen numerischen Array-Index zur Einfügung oder Aktualisierung darstellt.
4
const result = Reflect.set(target, prop, value, receiver);
Delegiert die Zuweisung an die native Reflect-API, um Prototypenbindungen und Rückgabewerte korrekt zu halten.
5
if (isIndex || prop === 'length') {
Filtert Protokollierungs-Trigger exklusiv auf Index-Zuweisungen und Längenänderungen des Arrays.