Vue3.0 API中如何使用markRaw

這篇文章主要介紹“Vue3.0 API中如何使用markRaw”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue3.0 API中如何使用markRaw”文章能幫助大家解決問題。

markRaw

標記一個對象，使其永遠不會轉換為 proxy。返回對象本身。

<script setup>

import { markRaw, reactive, isReactive } from "vue";

const foo = markRaw({})

console.log(isReactive(reactive(foo))) // false

// 嵌套在其他響應式對象中時也可以使用

const bar = reactive({ foo })

console.log(isReactive(bar.foo)) // false

</script>

重要

markRaw 和下方的 shallowXXX API 使你可以有選擇地退出默認的深度響應式/只讀轉換模式，并將原始的，未被代理的對象嵌入狀態圖中。它們可以根據情況靈活運用：

有些值不應該是響應式的，例如復雜的第三方類實例或 Vue 組件對象。

當渲染具有不可變數據源的大列表時，跳過 proxy 轉換可以提高性能。

這些例子是進階的運用，因為原始選擇退出僅在根級別，因此，如果將嵌套在內的、未標記的原始對象添加進響應式對象，然后再次訪問該響應式對象，就會得到原始對象被代理后的版本。這可能會導致同一性風險&mdash;&mdash;即執行一個依賴于對象本身的操作，但同時使用同一對象的原始版本和被代理后的版本：

<script setup>

import { markRaw, reactive, isReactive } from "vue";

const foo = markRaw({

  nested: {}

})

const bar = reactive({

  // 雖然 `foo` 被標記為原始，但 foo.nested 不是。

  nested: foo.nested

})

console.log(foo.nested === bar.nested) // false

</script>

同一性風險通常很少見。然而，為了正確地使用這些 API，同時安全地避免同一性風險，就需要對響應性系統的工作原理有一個充分的理解。

關于“Vue3.0 API中如何使用markRaw”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。