Snippet

Performance Optimization for Large Objects with markRaw

markRaw explicitly marks an object so that it will never be converted into a proxy. This is crucial for performance when storing large, complex third-party class instances in a reactive state.

snippet.js

javascript

import { reactive, markRaw } from 'vue';
 
const state = reactive({
  mapInstance: markRaw(new ThirdPartyMapLibrary())
});

vue

Breakdown

markRaw(new ThirdPartyMapLibrary())

Prevents Vue from tracking this specific object recursively.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Performance Optimization for Large Objects with markRaw

Related