快捷導(dǎo)航

vue3中markRaw示例詳解

更新時(shí)間：2024年04月01日 12:16:32 作者：Br不二

markRaw是將一個(gè)對(duì)象標(biāo)記為普通對(duì)象,而toRaw是將reactive對(duì)象變?yōu)槠胀▽?duì)象,在 Vue 3 中,markRaw 是一個(gè)用于告訴 Vue 的響應(yīng)性系統(tǒng)不要對(duì)某個(gè)對(duì)象進(jìn)行轉(zhuǎn)換或追蹤其響應(yīng)性的函數(shù),下面給大家介紹vue3中markRaw詳解,感興趣的朋友一起看看吧

在 Vue 3 中，markRaw 是一個(gè)用于告訴 Vue 的響應(yīng)性系統(tǒng)不要對(duì)某個(gè)對(duì)象進(jìn)行轉(zhuǎn)換或追蹤其響應(yīng)性的函數(shù)。當(dāng)你有一個(gè)對(duì)象，并且你確定你不需要它成為響應(yīng)性對(duì)象時(shí)，你可以使用 markRaw 來(lái)標(biāo)記它。這在一些場(chǎng)景中非常有用，比如當(dāng)你需要集成一個(gè)第三方庫(kù)或插件，并且這個(gè)庫(kù)或插件的某些部分不需要是響應(yīng)性的。

下面是一個(gè)詳細(xì)的示例，展示了如何在 Vue 3 中使用 markRaw：

import { reactive, markRaw, toRefs } from 'vue';
// 創(chuàng)建一個(gè)普通的 JavaScript 對(duì)象
const rawObject = {
  name: 'Raw Object',
  value: 'This is a raw object and it will not be reactive.'
};
// 使用 markRaw 標(biāo)記這個(gè)對(duì)象，使其保持原樣
const markedRawObject = markRaw(rawObject);
// 創(chuàng)建一個(gè)響應(yīng)性對(duì)象
const state = reactive({
  // 將標(biāo)記過(guò)的 rawObject 放入響應(yīng)性對(duì)象中
  markedRawObject,
  // 另一個(gè)普通的對(duì)象，它會(huì)被轉(zhuǎn)換為響應(yīng)性對(duì)象
  reactiveObject: {
    name: 'Reactive Object',
    value: 'This is a reactive object and it will track changes.'
  }
});
// 在組件中使用這些對(duì)象
export default {
  setup() {
    // 使用 toRefs 來(lái)解構(gòu)響應(yīng)性對(duì)象的屬性，以便在模板中直接使用
    const { markedRawObject, reactiveObject } = toRefs(state);
    // 由于 markedRawObject 是被 markRaw 標(biāo)記過(guò)的，修改它不會(huì)觸發(fā) Vue 的響應(yīng)性系統(tǒng)
    markedRawObject.value.name = 'Modified Raw Object'; // 這不會(huì)觸發(fā)更新
    // 修改 reactiveObject 則會(huì)觸發(fā) Vue 的響應(yīng)性更新
    reactiveObject.value.name = 'Modified Reactive Object'; // 這會(huì)觸發(fā)更新
    // 返回這些屬性，以便在模板中使用
    return {
      markedRawObject,
      reactiveObject
    };
  }
};

在上面的代碼中，我們創(chuàng)建了一個(gè)普通的 JavaScript 對(duì)象 rawObject，并使用 markRaw 函數(shù)將其標(biāo)記為原樣對(duì)象。然后，我們將這個(gè)標(biāo)記過(guò)的對(duì)象放入一個(gè)響應(yīng)性對(duì)象 state 中。在組件的 setup 函數(shù)中，我們解構(gòu)出 markedRawObject 和 reactiveObject，并嘗試修改它們的屬性。由于 markedRawObject 是被 markRaw 標(biāo)記過(guò)的，所以修改它的屬性不會(huì)觸發(fā) Vue 的響應(yīng)性系統(tǒng)。而修改 reactiveObject 的屬性則會(huì)觸發(fā)響應(yīng)性更新。

在模板中，你可以像這樣使用這些屬性：

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

請(qǐng)注意，即使 markedRawObject 的屬性在模板中顯示出來(lái)了，但由于它是原樣對(duì)象，所以對(duì)其屬性的修改不會(huì)觸發(fā)視圖的更新。而 reactiveObject 的屬性修改則會(huì)觸發(fā)視圖的更新。

markRaw 的主要用途是當(dāng)你確定某個(gè)對(duì)象不需要響應(yīng)性時(shí)，避免不必要的性能開(kāi)銷和潛在的錯(cuò)誤。這在處理第三方庫(kù)、大型數(shù)據(jù)對(duì)象或性能敏感的場(chǎng)景中特別有用。

到此這篇關(guān)于vue3中markRaw示例詳解的文章就介紹到這了,更多相關(guān)vue3 markRaw內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: