Vue3的新API: markRaw和toRaw

markRaw:标记一个对象，使其永远不会转换为 proxy。返回对象本身。意思就是使其不能成为一个响应式对象。
 

const foo = markRaw({}) //创建一个markRaw对象
console.log(isReactive(reactive(foo))) // false   判断是不是响应式数据

• 有些值不应该是响应式的，例如复杂的第三方类实例或 Vue 组件对象。
• 当渲染具有不可变数据源的大列表时，跳过 proxy 转换可以提高性能。

toRaw:将响应式对象（由 reactive定义的响应式）转换为普通对象。

返回 reactive 或 readonly 代理的原始对象。这是一个“逃生舱”，可用于临时读取数据而无需承担代理访问/跟踪的开销，也可用于写入数据而避免触发更改。不建议保留对原始对象的持久引用。请谨慎使用。

const foo = {}
const reactiveFoo = reactive(foo)

console.log(toRaw(reactiveFoo) === foo) // true