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()
和shallow API,例如shallowReactive()
,允许您有选择地退出默认的深度反应/只读转换,并在状态图中嵌入原始的、非代理的对象。它们可以用于多种原因:
- 有些值不应该是响应式的,例如复杂的第三方类实例或 Vue 组件对象。
- 当渲染具有不可变数据源的大列表时,跳过 proxy 转换可以提高性能。
这些例子是进阶的运用,因为原始选择退出仅在根级别,因此,如果将嵌套在内的、未标记的原始对象添加进响应式对象,然后再次访问该响应式对象,就会得到原始对象被代理后的版本。这可能会导致同一性风险——即执行一个依赖于对象本身的操作,但同时使用同一对象的原始版本和被代理后的版本:
const foo = markRaw({ nested: {} }) const bar = reactive({ // // 虽然 `foo` 被标记为原始,但 foo.nested 不是。 nested: foo.nested }) console.log(foo.nested === bar.nested) // false
同一性风险通常很少见。然而,为了正确地使用这些 API,同时安全地避免同一性风险,就需要对响应性系统的工作原理有一个充分的理解。