vue函數比較：toRaw()和markRaw()的使用

這篇文章帶大家學習vue函數，比較一下vueJs中toRaw與markRaw函數，希望對大家有幫助！

針對一些特殊的需求，在專案裡，需要將響應式資料變成普通原始類型數據，這種情況是有的。

在Vue裡，能夠將普通資料型別的資料變成回應式資料；同時，也能將響應式類型資料變成普通型別資料

可以用於提升資料的效能

toRaw()函數

接收一個reactive響應式資料,將一個響應式的資料變成普通型別的資料,轉換為非響應式資料,相當於還原物件,reactive相當於製作,但對於ref響應式資料不起作用。 【相關推薦：vuejs影片教學、web前端開發】

#將一個由reactive產生的響應式物件轉為普通(原始)物件

toRaw()可以傳回由reactive()、readonly()、shallowReactive()或shallowReadonly()建立的代理對應的原始物件

這是一個可以用臨時讀取而不引起代理存取/追蹤開銷,或寫入而不觸發更改的特殊方法,在官方文檔裡,是不建議保存對原始對象的持久引用

使用場景:用於讀取響應式對象的普通對象,對這個普通對象的所有操作,不會引起頁面的更新

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

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

注意

針對物件,後續動態新增的屬性,如果沒有把整個物件對外暴露出去,模板中使用新增的變數是不生效的(針對setup函數形式)

markRaw()函數

接收一個原始資料,標記一個物件,使它永遠不會再成為響應式物件,也就是資料在邏輯中即使修改變化了,但是頁面不會更新變化

將一個物件標記為不可被轉為代理,傳回該物件本身

#應用場景:

[1]. 有些值不應該被設定為響應式的,例如複雜的第三方類別庫或Vue元件物件

#[2]. 當渲染具有不可變資料來源的大列表時,跳過響應式轉換可以提高效能

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

// 也适用于嵌套在其他响应性对象
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

markRaw()與shallowReactive()這樣淺層式API使你可以有選擇的避開預設的深度回應/唯讀轉換,並在狀態關係譜中嵌入原始,非代理的物件

如果把一個嵌套的,沒有標記的原始對象設置成一個響應式對象,然後再次訪問它,你獲取到的是代理的版本,這可能會導致對象身份風險

即執行一個依賴於對象身份的操作,但卻同時使用了同一物件的原始版本和代理版本

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

const bar = reactive({
  // 尽管 `foo` 被标记为了原始对象，但 foo.nested 却没有
  nested: foo.nested
})

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

總結

#ref()與reactive()是將一個非響應式類型資料變成響應式資料,而toRaw()與markRaw()相當於是對響應式資料的還原,將一個響應式資料變成非響應式資料

而toRaw只針對響應式物件類型的資料起作用,如果涉及到將一個響應式資料轉變為非響應式資料,只用於純資料的渲染,不引起頁面的更新,就可以使用toRaw或markRaw()

##往往可以提升資料的效能

（學習影片分享：

vuejs入門教學、程式設計基礎影片）

以上是vue函數比較：toRaw()和markRaw()的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！