toRaw
作用
用于获取一个响应式对象的原始对象,toRaw
返回的对象不再是响应式的,不会触发视图更新。
toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象。
注意
:这是一个可以用于临时读取而不引起代理访问/跟踪开销,或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用,请谨慎使用。
示例
const foo = {}
const reactiveFoo = reactive(foo)
console.log(toRaw(reactiveFoo) === foo) // true
使用场景
在需要将响应式对象传递给非Vue
的库或外部系统时,使用toRaw
可以确保该对象为原始对象。
markRaw
作用
将一个对象标记为不可被转为代理。返回该对象本身。
示例
const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false
// 也适用于嵌套在其他响应性对象
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false
使用场景
有些值不应该是响应式的,例如复杂的第三方类实例或 Vue 组件对象。
当呈现带有不可变数据源的大型列表时,跳过代理转换可以提高性能。