Detailed explanation of markRaw example in vue3

In Vue 3,markRawIs a function used to tell Vue's responsive system not to convert or track an object's responsiveness. When you have an object and you are sure you don't need it to be a responsive object, you can usemarkRawTo mark it. This is very useful in some scenarios, such as when you need to integrate a third-party library or plug-in, and some parts of this library or plug-in need not be responsive.

Here is a detailed example showing how to use it in Vue 3markRaw：

import { reactive, markRaw, toRefs } from 'vue';
// Create a normal JavaScript objectconst rawObject = {
  name: 'Raw Object',
  value: 'This is a raw object and it will not be reactive.'
};
// Use markRaw to mark this object so it isconst markedRawObject = markRaw(rawObject);
// Create a responsive objectconst state = reactive({
  // Put the marked rawObject into the responsive object  markedRawObject,
  // Another normal object, it will be converted into a responsive object  reactiveObject: {
    name: 'Reactive Object',
    value: 'This is a reactive object and it will track changes.'
  }
});
// Use these objects in the componentexport default {
  setup() {
    // Use toRefs to deconstruct the properties of the responsive object so that it can be used directly in the template    const { markedRawObject, reactiveObject } = toRefs(state);
    // Since markedRawObject is marked by markRaw, modifying it will not trigger Vue's responsive system     = 'Modified Raw Object'; // This will not trigger an update    // Modifying reactiveObject will trigger Vue's responsive update     = 'Modified Reactive Object'; // This will trigger an update    // Return these properties for use in the template    return {
      markedRawObject,
      reactiveObject
    };
  }
};

In the above code, we create a normal JavaScript objectrawObjectand usemarkRawThe function marks it as an as-is object. Then, we put this marked object into a responsive objectstatemiddle. In the componentsetupIn the function, we deconstructmarkedRawObjectandreactiveObjectand try to modify their properties. becausemarkedRawObjectIt's beenmarkRawMarked, so modifying its properties will not trigger Vue's responsive system. ModifyreactiveObjectThe properties of , trigger responsive updates.

In the template, you can use these properties like this:

<template>
  <div>
    <p>Marked Raw Object: {{  }} - {{  }}</p>
    <p>Reactive Object: {{  }} - {{  }}</p>
  </div>
</template>

Please note that evenmarkedRawObjectThe property of ,is displayed in the template, but since it is an object as is, modification of its properties does not trigger updates to the view. andreactiveObjectChanges to the property of the view will trigger the update of the view.

markRawThe main purpose is to avoid unnecessary performance overhead and potential errors when you determine that an object does not require responsiveness. This is especially useful in handling third-party libraries, large data objects, or performance-sensitive scenarios.

This is the end of this article about the detailed explanation of the markRaw example in vue3. For more related vue3 markRaw content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!