vue3 markRaw example detail _VUe.js_Script home
Script house Common server software
Quick navigation
Your location: Home page → Network programming → JavaScript → javascript class library → vue.js → vue3 markRaw

Detail the markRaw example in vue3

Updated: April 01, 2024 12:16:32 Author: Br
markRaw is marking an object as a normal object, while toRaw is turning the reactive object into a normal object. In Vue 3,markRaw is a method for telling Vue The responsiveness of the system does not convert an object or track its responsiveness of the function, the following to introduce you to vue3 markRaw detailed explanation, interested friends take a look

In Vue 3, markRaw is a function that tells Vue's responsiveness system not to transform an object or track its responsiveness. When you have an object and you're sure you don't need it to be a responsive object, you can mark it using markRaw. This is useful in situations where you need to integrate a third-party library or plug-in, and some parts of the library or plug-in do not need to be responsive.

Here is a detailed example of how to use markRaw in Vue 3:

import { reactive, markRaw, toRefs } from 'vue'; // Create a plain JavaScript Object const rawObject = {name: 'Raw Object', value: 'This is a raw object and it will not be reactive.' }; // Mark the object with markRaw, leaving it as it is const markedRawObject = markRaw(rawObject); // Create a reactive object const state = reactive({// Put the marked rawObject into the reactive object markedRawObject, // another normal object, It will be converted to a Reactive Object reactiveObject: {name: 'Reactive Object', value: 'This is a reactive object and it will track changes.' } }); // Use these objects in the component export default {setup() {// Use toRefs to deconstruct the properties of the responsive object, To use const {markedRawObject, reactiveObject} = toRefs(state) directly in the template; / / as a result of markedRawObject was markRaw tagged, modify it will not trigger a Vue markedRawObject responsive system. The value. The name = 'Modified Raw Object'; / / it won't trigger/update/modify reactiveObject will trigger a Vue responsiveness to update reactiveObject. Value. The name = 'Modified Reactive Object'; // This triggers an update // to return these properties for use in the template with return {markedRawObject, reactiveObject}; }};

In the above code, we create a plain JavaScript object, rawObject, and mark it as an as-is object using the markRaw function. We then put the tagged object into a responsive object state. In the component's setup function, we deconstruct markedRawObject and reactiveObject and try to modify their properties. Since markedRawObject is marked by markRaw, modifying its properties does not trigger Vue's responsive system. Modifying the properties of the reactiveObject triggers a responsive update.

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

<template>
  <div>
    <p>Marked Raw Object: {{ markedRawObject.name }} - {{ markedRawObject.value }}</p>
    <p>Reactive Object: {{ reactiveObject.name }} - {{ reactiveObject.value }}</p>
  </div>
</template>

Note that even if markedRawObject's properties are displayed in the template, because it is an as-is object, modifying its properties does not trigger an update of the view. The modification of the reactiveObject property triggers the update of the view.

The primary use of markRaw is to avoid unnecessary performance overhead and potential errors when you determine that an object does not need responsiveness. This is especially useful in scenarios where you are working with third-party libraries, large data objects, or performance sensitive.

To this article on vue3 markRaw example detailed explanation of the article is introduced to this, more related to vue3 markRaw content please search the script home previous articles or continue to browse the following related articles hope that you will support the script home in the future!

Articles you may be interested in:

Related article

Latest comments