在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