在Vue3中，響應(yīng)式系統(tǒng)是其核心特性之一。我們通過reactive()和ref()，可以輕松地創(chuàng)建響應(yīng)式數(shù)據(jù)對象，從而實現(xiàn)數(shù)據(jù)驅(qū)動的視圖更新。但是，有時我們需要訪問這些響應(yīng)式對象的原始值，這時候toRaw()和markRaw()就來滿足我們的需求。

toRaw()

根據(jù)一個 Vue 創(chuàng)建的代理返回其原始對象。
詳細(xì)信息
toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 創(chuàng)建的代理對應(yīng)的原始對象。把響應(yīng)式對象，變成普通對象。對這個普通對象的操作，不會使頁面更新。
注意事項：
1、使用toRaw()獲取的原始對象將不再具有響應(yīng)性。
2、修改原始對象不會觸發(fā)視圖更新。
3、toRaw()適用于性能優(yōu)化和與外部庫的集成。
4、不建議保存對原始對象的持久引用，請謹(jǐn)慎使用。

markRaw()

將一個對象標(biāo)記為不可被轉(zhuǎn)為代理。返回該對象本身。
詳細(xì)信息
toRaw()把 reactive()響應(yīng)式對象，變成普通對象，用于讀取響應(yīng)式對象對應(yīng)的普通對象，對這個普通對象的操作，不會使頁面更新。

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

// 也適用于嵌套在其他響應(yīng)性對象
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

注意事項：

const foo = markRaw({
  nested: {}
})

const bar = reactive({
  // 盡管 `foo` 被標(biāo)記為了原始對象，但 foo.nested 卻沒有
  nested: foo.nested
})

console.log(foo.nested === bar.nested) // false