您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue函數(shù)toRaw和markRaw如何使用的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇vue函數(shù)toRaw和markRaw如何使用文章都會有所收獲,下面我們一起來看看吧。
接收一個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)的原始對象
這是一個可以用臨時讀取而不引起代理訪問/跟蹤開銷,或是寫入而不觸發(fā)更改的特殊方法,在官方文檔里,是不建議保存對原始對象的持久引用
使用場景:用于讀取響應(yīng)式對象的普通對象,對這個普通對象的所有操作,不會引起頁面的更新
const foo = {} const reactiveFoo = reactive(foo) console.log(toRaw(reactiveFoo) === foo) // true
注意
針對對象,后續(xù)動態(tài)新增的屬性,如果沒有把整個對象對外暴露出去,模板中使用新增的變量是不生效的(針對setup
函數(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ù)源的大列表時,跳過響應(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)險
即執(zhí)行一個依賴于對象身份的操作,但卻同時使用了同一對象的原始版本和代理版本
const foo = markRaw({ nested: {} }) const bar = reactive({ // 盡管 `foo` 被標(biāo)記為了原始對象,但 foo.nested 卻沒有 nested: foo.nested }) console.log(foo.nested === bar.nested) // false
關(guān)于“vue函數(shù)toRaw和markRaw如何使用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“vue函數(shù)toRaw和markRaw如何使用”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。