Vue3:响应式 API-进阶toRaw()和markRaw()

在Vue3中,响应式系统是其核心特性之一。我们通过reactive()和ref(),可以轻松地创建响应式数据对象,从而实现数据驱动的视图更新。但是,有时我们需要访问这些响应式对象的原始值,这时候toRaw()和markRaw()就来满足我们的需求。

toRaw()

根据一个 Vue 创建的代理返回其原始对象。
详细信息
toRaw() 可以返回由 reactive()readonly()shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象。把响应式对象,变成普通对象。对这个普通对象的操作,不会使页面更新。
注意事项:
1、使用toRaw()获取的原始对象将不再具有响应性。
2、修改原始对象不会触发视图更新。
3、toRaw()适用于性能优化和与外部库的集成。
4、不建议保存对原始对象的持久引用,请谨慎使用。

markRaw()

将一个对象标记为不可被转为代理。返回该对象本身。
详细信息
toRaw()reactive()响应式对象,变成普通对象,用于读取响应式对象对应的普通对象,对这个普通对象的操作,不会使页面更新。

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

// 也适用于嵌套在其他响应性对象
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

注意事项:

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

const bar = reactive({
  // 尽管 `foo` 被标记为了原始对象,但 foo.nested 却没有
  nested: foo.nested
})

console.log(foo.nested === bar.nested) // false
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容