javascript / expert
Snippet
Leistungsoptimierung mit markRaw
Beim Umgang mit großen, komplexen Instanzen von Drittanbieter-Bibliotheken (wie Three.js-Szenen oder Mapbox-Karten) kann die tiefe Reaktivität von Vue massiven Overhead verursachen. 'markRaw' weist das Reaktivitätssystem von Vue explizit an, dieses Objekt zu überspringen, was die Performance schont, indem unnötiges Proxy-Wrapping vermieden wird.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { markRaw, reactive } from 'vue';import { ThirdPartyEngine } from './external';export default {setup() {const state = reactive({// markRaw prevents Vue from converting the engine into a Proxyengine: markRaw(new ThirdPartyEngine()),active: false});return { state };}};
vue
Erklärung
1
engine: markRaw(new ThirdPartyEngine())
Umschließt die Instanz, damit Vue sie beim reaktiven Tracking ignoriert.
2
reactive({ ... })
Der umgebende Status bleibt reaktiv, aber 'engine' bleibt ein einfaches Objekt.