Optimierung externer Bibliotheksinstanzen mit markRaw

Snippet

Optimierung externer Bibliotheksinstanzen mit markRaw

Bei der Integration schwerer Drittanbieter-Bibliotheken (Mapbox, Three.js, Leaflet) verursacht die Reaktivität ihrer Instanzen einen massiven Performance-Overhead, da Vue versucht, deren tiefe interne Strukturen zu durchlaufen. markRaw weist Vue an, das Proxying des Objekts zu überspringen, was Speicher und CPU-Zyklen spart, während die Instanz weiterhin in der Komponente verwendet werden kann.

snippet.js
javascript
import { markRaw, onMounted } from 'vue';
import L from 'leaflet';
 
export default {
  setup() {
    let mapInstance = null;
 
    onMounted(() => {
      // markRaw prevents Vue from making the complex Leaflet object reactive
      mapInstance = markRaw(L.map('map-container').setView([51.5, -0.09], 13));
    });
 
    const flyToHome = () => {
      mapInstance.flyTo([0, 0]);
    };
 
    return { flyToHome };
  }
}

vue

Erklärung

mapInstance = markRaw(L.map(...));

Umschließt die Instanz, um sicherzustellen, dass Vue sie niemals in einen Proxy umwandelt.

let mapInstance = null;

Wird als normale Variable statt als Ref gespeichert, um unnötigen Overhead zu vermeiden, wenn sich die Referenz selbst nicht ändert.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek