【Vue3】toRaw和markRow

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 组件对象。

当呈现带有不可变数据源的大型列表时，跳过代理转换可以提高性能。