vue函數toRaw()和markRaw()怎么使用

這篇文章主要講解了“vue函數toRaw()和markRaw()怎么使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue函數toRaw()和markRaw()怎么使用”吧！

針對一些特殊的需求，在項目里，需要將響應式數據變為普通原始類型數據，這種情況是有的。

在Vue里，能夠將普通數據類型的數據變為響應式數據；同時，也能將響應式類型數據變為普通類型數據

可以用于提升數據的性能

toRaw()函數

接收一個reactive響應式數據,將一個響應式的數據變為普通類型的數據,轉化為非響應式數據,相當于還原對象,reactive相當于制作,但對于ref響應式數據不起作用。

將一個由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

感謝各位的閱讀，以上就是“vue函數toRaw()和markRaw()怎么使用”的內容了，經過本文的學習后，相信大家對vue函數toRaw()和markRaw()怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！