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

成都創(chuàng)新互聯(lián)公司網(wǎng)絡(luò)公司擁有10多年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗(yàn)，上千客戶的共同信賴。提供網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站開發(fā)、網(wǎng)站定制、友情鏈接、建網(wǎng)站、網(wǎng)站搭建、響應(yīng)式網(wǎng)站、網(wǎng)頁設(shè)計(jì)師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)

針對(duì)一些特殊的需求，在項(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ù)

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

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

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

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

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

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

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

注意

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

markRaw()函數(shù)

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

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

應(yīng)用場(chǎng)景:

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

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

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

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

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

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

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

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

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

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

感謝各位的閱讀，以上就是“vue函數(shù)toRaw()和markRaw()怎么使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)vue函數(shù)toRaw()和markRaw()怎么使用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

文章標(biāo)題：vue函數(shù)toRaw()和markRaw()怎么使用
文章地址：http://chinadenli.net/article2/jpcgoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、微信公眾號(hào)、微信小程序、虛擬主機(jī)、動(dòng)態(tài)網(wǎng)站、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)