在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