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

javascript

import { markRaw, reactive } from 'vue';
import { ThirdPartyEngine } from './external';
 
export default {
  setup() {
    const state = reactive({
      // markRaw prevents Vue from converting the engine into a Proxy
      engine: markRaw(new ThirdPartyEngine()),
      active: false
    });
    
    return { state };
  }
};

vue

Erklärung

engine: markRaw(new ThirdPartyEngine())

Umschließt die Instanz, damit Vue sie beim reaktiven Tracking ignoriert.

reactive({ ... })

Der umgebende Status bleibt reaktiv, aber 'engine' bleibt ein einfaches Objekt.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Leistungsoptimierung mit markRaw

Verwandt