Vue.js markRaw()用法及代碼示例

function markRaw<T extends object>(value: T): T

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

// also works when nested inside other reactive objects
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

謹慎使用

markRaw() 和 shallowReactive() 等淺層 API 允許您有選擇地 opt-out 進行默認的深度反應/隻讀轉換，並在狀態圖中嵌入原始的非代理對象。它們可以用於多種原因：

• 有些值根本不應該是被動的，例如複雜的 3rd 方類實例或 Vue 組件對象。

• 在呈現具有不可變數據源的大型列表時，跳過代理轉換可以提高性能。

它們被認為是高級的，因為原始 opt-out 僅位於根級別，因此如果您將嵌套的、未標記的原始對象設置為反應性對象，然後再次訪問它，您將獲得代理版本。這可能會導致身份風險——即執行依賴於對象身份但同時使用同一對象的原始版本和代理版本的操作：

const foo = markRaw({
  nested: {}
})

const bar = reactive({
  // although `foo` is marked as raw, foo.nested is not.
  nested: foo.nested
})

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

身份風險通常很少見。但是，要正確使用這些 API，同時安全地避免身份危害，需要對反應係統的工作原理有深入的了解。