快捷導(dǎo)航

vueJs函數(shù)readonly與shallowReadonly使用對(duì)比詳解

更新時(shí)間：2023年03月31日 12:33:49 作者：itclanCoder

這篇文章主要為大家介紹了vueJs函數(shù)readonly與shallowReadonly使用對(duì)比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

在使用vue3開(kāi)發(fā)項(xiàng)目時(shí),對(duì)于一些特殊的需求,針對(duì)有些數(shù)據(jù)字段,在前端,只允許讀取,不允許修改,比如:有的網(wǎng)站用戶名,一旦注冊(cè)了,就不允許修改

當(dāng)然,有時(shí)候,我們從別的地方引用數(shù)據(jù)過(guò)來(lái),用作信息的展示,但是卻不允許修改,不希望影響源數(shù)據(jù)

那么readonly與shallowReadonly這兩個(gè)API就很有用了的

readonly

讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的,接收一個(gè)響應(yīng)式數(shù)據(jù),經(jīng)過(guò)readonly加工處理一下,那么新賦值的數(shù)據(jù)都不允許修改

接受一個(gè)對(duì)象 (不論是響應(yīng)式還是普通的) 或是一個(gè) ref，返回一個(gè)原值的只讀代理

頁(yè)面沒(méi)有更新有兩種情況

[1]. 數(shù)據(jù)修改了,但數(shù)據(jù)不是響應(yīng)式,vue監(jiān)測(cè)不到

[2]. 數(shù)據(jù)壓根就沒(méi)有更改

const original = reactive({ count: 0 })
const copy = readonly(original)
// 更改源屬性會(huì)觸發(fā)其依賴的偵聽(tīng)器
original.count++
// 更改該只讀副本將會(huì)失敗，并會(huì)得到一個(gè)警告,頁(yè)面數(shù)據(jù)不會(huì)更新
copy.count++ // warning!

使用readonly對(duì)響應(yīng)式數(shù)據(jù)包裹處理一下后,則再次修改數(shù)據(jù)時(shí),頁(yè)面數(shù)據(jù)不會(huì)更新

shallowreadonly

接收一個(gè)響應(yīng)式數(shù)據(jù),經(jīng)過(guò)shallowreadonly的處理,變成一個(gè)只讀的,只考慮對(duì)象的第一層數(shù)據(jù),不可以修改,但是第一層嵌套里的深層數(shù)據(jù)卻支持修改

讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x能力(淺只讀)

應(yīng)用場(chǎng)景: 不希望數(shù)據(jù)被修改,當(dāng)數(shù)據(jù)是從別的地方取過(guò)來(lái),不希望影響源數(shù)據(jù)

const state = shallowReadonly({
  foo: 1,
  nested: {
    bar: 2
  }
})
// 更改狀態(tài)自身的屬性會(huì)失敗,不可以修改
state.foo++
// ...但可以更改下層嵌套對(duì)象
isReadonly(state.nested) // false
// 這是可以通過(guò)的
state.nested.bar++

總結(jié)

readonly與shallowReadonly都是讓響應(yīng)式數(shù)據(jù)只具備讀的能力,后者是淺層次的只讀,也就是只對(duì)數(shù)據(jù)對(duì)象第一層起作用,深層次的嵌套,當(dāng)時(shí)用shallowReadonl()處理時(shí),深層次數(shù)據(jù)支持被修改

在不希望數(shù)據(jù)被修改,或當(dāng)數(shù)據(jù)是從別的地方取過(guò)來(lái),不希望影響源數(shù)據(jù)時(shí),使用readonly()或shallowReadonly()就很有用

至于數(shù)據(jù)能不能修改是由寫代碼的開(kāi)發(fā)者決定的,也是由產(chǎn)品功能決定的,支不支持修改,可以控制數(shù)據(jù)是否能讀寫能力

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

您可能感興趣的文章: