Snippet

Optimizing Performance with markRaw

When dealing with large, complex third-party library instances (like Three.js scenes or Mapbox maps), Vue's deep reactivity can cause massive overhead. 'markRaw' explicitly tells Vue's reactivity system to skip this object, preserving performance by avoiding unnecessary Proxy wrapping.

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

Breakdown

engine: markRaw(new ThirdPartyEngine())

Wraps the instance so Vue ignores it for reactive tracking.

reactive({ ... })

The surrounding state remains reactive, but 'engine' stays a plain object.

Previous snippet Next snippet

More Expert JavaScript exercises →

Optimizing Performance with markRaw

Related