• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 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,同时安全地避免同一性风险,就需要对响应性系统的工作原理有一个充分的理解。

    上篇:toRaw()

    下篇:effectScope()