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，同时安全地避免身份危害，需要对反应系统的工作原理有深入的了解。