一、簡(jiǎn)介

在Vue3中，響應(yīng)式系統(tǒng)是其核心特性之一，它允許我們輕松地管理和更新應(yīng)用程序的狀態(tài)。然而，有時(shí)我們需要排除某些對(duì)象，使其不被響應(yīng)式系統(tǒng)追蹤。markRaw()就是為此目的而設(shè)計(jì)的。本文將詳細(xì)介紹markRaw()的作用、使用場(chǎng)景及最佳實(shí)踐。

二、使用場(chǎng)景

2.1 避免性能開(kāi)銷(xiāo)

在某些情況下，我們可能不希望某個(gè)對(duì)象被Vue的響應(yīng)式系統(tǒng)追蹤，以避免不必要的性能開(kāi)銷(xiāo)。例如，大型的第三方庫(kù)對(duì)象或不需要響應(yīng)式的靜態(tài)數(shù)據(jù)。

2.2 防止意外修改

有些對(duì)象在應(yīng)用程序的生命周期中不應(yīng)該被修改。通過(guò)markRaw()可以確保這些對(duì)象不會(huì)被意外地轉(zhuǎn)換為響應(yīng)式，從而避免不必要的狀態(tài)變更。

三、基本使用

3.1 標(biāo)記對(duì)象

markRaw()的主要作用是標(biāo)記一個(gè)對(duì)象，使其不再被reactive或shallowReactive轉(zhuǎn)換為響應(yīng)式代理。

<script lang="ts" setup>
  import { markRaw, reactive } from 'vue';

  const someObject = { name: '天天鴨' };
  const markedObject = markRaw(someObject);

  // 即使使用 reactive，markedObject 也不會(huì)變成響應(yīng)式
  const state = reactive({ obj: markedObject });
</script>

在上面的例子中，markedObject即使被包裹在reactive中，也不會(huì)變成響應(yīng)式對(duì)象。

四、功能詳解

4.1 markRaw與reactive的區(qū)別

reactive會(huì)將整個(gè)對(duì)象轉(zhuǎn)換為響應(yīng)式代理，而markRaw則會(huì)阻止這種轉(zhuǎn)換。

4.2 markRaw與ref的區(qū)別

ref主要用于創(chuàng)建一個(gè)響應(yīng)式引用，它可以封裝任何類(lèi)型的值如字符串、數(shù)字和對(duì)象。當(dāng)你將一個(gè)對(duì)象放入ref時(shí)，ref本身依然是響應(yīng)式的，而markRaw的作用是阻止對(duì)象被轉(zhuǎn)換為響應(yīng)式，這和ref的設(shè)計(jì)不匹配。

<script lang="ts" setup>
  import { ref, markRaw } from 'vue';

  const someObject = { name: '天天鴨' };
  const rawObject = markRaw(someObject);

  const stateRef = ref(rawObject);

  // ref 本身是響應(yīng)式的，但 rawObject 不會(huì)被轉(zhuǎn)換為響應(yīng)式
  stateRef.value.name = '天天鵝'; // 這不會(huì)觸發(fā)響應(yīng)式更新
</script>

五、最佳實(shí)踐及案例

5.1 使用大型第三方庫(kù)對(duì)象

在使用大型第三方庫(kù)（如圖表庫(kù)、地圖庫(kù)）時(shí)，可以使用markRaw()避免這些對(duì)象被Vue的響應(yīng)式系統(tǒng)追蹤，從而提高性能。

<script lang="ts" setup>
  import { markRaw } from 'vue';
  import * as echarts from 'echarts';

  const chartInstance = markRaw(echarts.init(document.getElementById('chart')));
</script>

5.2 靜態(tài)配置數(shù)據(jù)

對(duì)于一些靜態(tài)配置數(shù)據(jù)，可以使用markRaw()確保它們不會(huì)被意外修改。

<script lang="ts" setup>
  import { markRaw } from 'vue';

  const config = markRaw({
    apiEndpoint: 'https://api.example.com',
    timeout: 5000
  });
</script>

六、總結(jié)

markRaw()是Vue3中一個(gè)非常有用的工具，特別是在需要控制對(duì)象的響應(yīng)式行為時(shí)。通過(guò)合理地使用markRaw()，我們可以避免不必要的性能開(kāi)銷(xiāo)和防止意外的狀態(tài)變更，從而更好地管理應(yīng)用程序的狀態(tài)。

到此這篇關(guān)于Vue3響應(yīng)式高階用法之markRaw()的使用的文章就介紹到這了,更多相關(guān)Vue3 markRaw()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論