一、簡介

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

二、使用場景

2.1 避免性能開銷

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

2.2 防止意外修改

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

三、基本使用

3.1 標記對象

markRaw()的主要作用是標記一個對象，使其不再被reactive或shallowReactive轉換為響應式代理。

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

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

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

在上面的例子中，markedObject即使被包裹在reactive中，也不會變成響應式對象。

四、功能詳解

4.1 markRaw與reactive的區(qū)別

reactive會將整個對象轉換為響應式代理，而markRaw則會阻止這種轉換。

4.2 markRaw與ref的區(qū)別

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

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

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

  const stateRef = ref(rawObject);

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

五、最佳實踐及案例

5.1 使用大型第三方庫對象

在使用大型第三方庫（如圖表庫、地圖庫）時，可以使用markRaw()避免這些對象被Vue的響應式系統(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ù)據

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

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

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

六、總結

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

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

最新評論