前言

針對一些特殊的需求,在項(xiàng)目里,需要將響應(yīng)式數(shù)據(jù)變?yōu)槠胀ㄔ碱愋蛿?shù)據(jù),這種情況是有的

在Vue里,能夠?qū)⑵胀〝?shù)據(jù)類型的數(shù)據(jù)變?yōu)轫憫?yīng)式數(shù)據(jù),同時(shí),也能將響應(yīng)式類型數(shù)據(jù)變?yōu)槠胀愋蛿?shù)據(jù)

可以用于提升數(shù)據(jù)的性能

toRaw()函數(shù)

接收一個reactive響應(yīng)式數(shù)據(jù),將一個響應(yīng)式的數(shù)據(jù)變?yōu)槠胀愋偷臄?shù)據(jù),轉(zhuǎn)化為非響應(yīng)式數(shù)據(jù),相當(dāng)于還原對象,reactive相當(dāng)于制作,但對于ref響應(yīng)式數(shù)據(jù)不起作用

將一個由reactive生成的響應(yīng)式對象轉(zhuǎn)為普通(原始)對象

toRaw()可以返回由reactive(),readonly(),shallowReactive()或shallowReadonly()創(chuàng)建的代理對應(yīng)的原始對象

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

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

const foo = {}
const reactiveFoo = reactive(foo)
console.log(toRaw(reactiveFoo) === foo)  // true

注意

針對對象,后續(xù)動態(tài)新增的屬性,如果沒有把整個對象對外暴露出去,模板中使用新增的變量是不生效的(針對setup函數(shù)形式)

markRaw()函數(shù)

接收一個原始數(shù)據(jù),標(biāo)記一個對象,使它永遠(yuǎn)不會再成為響應(yīng)式對象,也就是數(shù)據(jù)在邏輯中即使修改變化了,但是頁面不會更新變化

將一個對象標(biāo)記為不可被轉(zhuǎn)為代理,返回該對象本身

應(yīng)用場景:

[1]. 有些值不應(yīng)該被設(shè)置為響應(yīng)式的,例如復(fù)雜的第三方類庫或Vue組件對象

[2]. 當(dāng)渲染具有不可變數(shù)據(jù)源的大列表時(shí),跳過響應(yīng)式轉(zhuǎn)換可以提高性能

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

markRaw()與shallowReactive()這樣淺層式API使你可以有選擇的避開默認(rèn)的深度響應(yīng)/只讀轉(zhuǎn)換,并在狀態(tài)關(guān)系譜中嵌入原始,非代理的對象

如果把一個嵌套的,沒有標(biāo)記的原始對象設(shè)置成一個響應(yīng)式對象,然后再次訪問它,你獲取到的是代理的版本,這可能會導(dǎo)致對象身份風(fēng)險(xiǎn)

即執(zhí)行一個依賴于對象身份的操作,但卻同時(shí)使用了同一對象的原始版本和代理版本

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

總結(jié)

ref()與reactive()是將一個非響應(yīng)式類型數(shù)據(jù)變?yōu)轫憫?yīng)式數(shù)據(jù),而toRaw()與markRaw()相當(dāng)于是對響應(yīng)式數(shù)據(jù)的還原,將一個響應(yīng)式數(shù)據(jù)變?yōu)榉琼憫?yīng)式數(shù)據(jù)

而toRaw只針對響應(yīng)式對象類型的數(shù)據(jù)起作用,如果涉及到將一個響應(yīng)式數(shù)據(jù)轉(zhuǎn)變?yōu)榉琼憫?yīng)式數(shù)據(jù),只用于純數(shù)據(jù)的渲染,不引起頁面的更新,就可以使用toRaw或markRaw()

以上就是vueJs函數(shù)toRaw markRaw使用對比詳解的詳細(xì)內(nèi)容，更多關(guān)于vueJs函數(shù)toRaw markRaw的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論