Snippet

Optimizing External Library Instances with markRaw

When integrating heavy third-party libraries (Mapbox, Three.js, Leaflet), making their instances reactive causes massive performance overhead because Vue tries to walk their deep internal structures. markRaw tells Vue to skip proxying the object, preserving memory and CPU cycles while still allowing the instance to be used within the component.

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

Breakdown

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

Wraps the instance to ensure Vue never converts it into a Proxy.

let mapInstance = null;

Stored as a regular variable instead of a ref to avoid unnecessary overhead if the reference itself doesn't change.

Previous snippet Next snippet

More Expert JavaScript exercises →

Optimizing External Library Instances with markRaw

Related