vueJs函數(shù)readonly與shallowReadonly使用對比詳解
前言
在使用vue3
開發(fā)項目時,對于一些特殊的需求,針對有些數(shù)據(jù)字段,在前端,只允許讀取,不允許修改,比如:有的網(wǎng)站用戶名,一旦注冊了,就不允許修改
當(dāng)然,有時候,我們從別的地方引用數(shù)據(jù)過來,用作信息的展示,但是卻不允許修改,不希望影響源數(shù)據(jù)
那么readonly
與shallowReadonly
這兩個API就很有用了的
readonly
讓一個響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的,接收一個響應(yīng)式數(shù)據(jù),經(jīng)過readonly
加工處理一下,那么新賦值的數(shù)據(jù)都不允許修改
接受一個對象 (不論是響應(yīng)式還是普通的) 或是一個 ref
,返回一個原值的只讀代理
頁面沒有更新有兩種情況
[1]. 數(shù)據(jù)修改了,但數(shù)據(jù)不是響應(yīng)式,vue
監(jiān)測不到
[2]. 數(shù)據(jù)壓根就沒有更改
const original = reactive({ count: 0 }) const copy = readonly(original) // 更改源屬性會觸發(fā)其依賴的偵聽器 original.count++ // 更改該只讀副本將會失敗,并會得到一個警告,頁面數(shù)據(jù)不會更新 copy.count++ // warning!
使用readonly
對響應(yīng)式數(shù)據(jù)包裹處理一下后,則再次修改數(shù)據(jù)時,頁面數(shù)據(jù)不會更新
shallowreadonly
接收一個響應(yīng)式數(shù)據(jù),經(jīng)過shallowreadonly
的處理,變成一個只讀的,只考慮對象的第一層數(shù)據(jù),不可以修改,但是第一層嵌套里的深層數(shù)據(jù)卻支持修改
讓一個響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x能力(淺只讀)
應(yīng)用場景: 不希望數(shù)據(jù)被修改,當(dāng)數(shù)據(jù)是從別的地方取過來,不希望影響源數(shù)據(jù)
const state = shallowReadonly({ foo: 1, nested: { bar: 2 } }) // 更改狀態(tài)自身的屬性會失敗,不可以修改 state.foo++ // ...但可以更改下層嵌套對象 isReadonly(state.nested) // false // 這是可以通過的 state.nested.bar++
總結(jié)
readonly
與shallowReadonly
都是讓響應(yīng)式數(shù)據(jù)只具備讀的能力,后者是淺層次的只讀,也就是只對數(shù)據(jù)對象第一層起作用,深層次的嵌套,當(dāng)時用shallowReadonl()
處理時,深層次數(shù)據(jù)支持被修改
在不希望數(shù)據(jù)被修改,或當(dāng)數(shù)據(jù)是從別的地方取過來,不希望影響源數(shù)據(jù)時,使用readonly()
或shallowReadonly()
就很有用
至于數(shù)據(jù)能不能修改是由寫代碼的開發(fā)者決定的,也是由產(chǎn)品功能決定的,支不支持修改,可以控制數(shù)據(jù)是否能讀寫能力
以上就是vueJs函數(shù)readonly與shallowReadonly使用對比詳解的詳細(xì)內(nèi)容,更多關(guān)于vue readonly shallowReadonly的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
關(guān)于vuejs中v-if和v-show的區(qū)別及v-show不起作用問題
v-if 有更高的切換開銷,而 v-show 有更高的出事渲染開銷.因此,如果需要非常頻繁的切換,那么使用v-show好一點;如果在運行時條件不太可能改變,則使用v-if 好點2018-03-03Ant Design Vue如何生成動態(tài)菜單a-menu
這篇文章主要介紹了Ant Design Vue如何生成動態(tài)菜單a-menu問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01vue3+vite+ts使用monaco-editor編輯器的簡單步驟
因為畢設(shè)需要用到代碼編輯器,根據(jù)調(diào)研,我選擇使用monaco-editor代碼編輯器,下面這篇文章主要給大家介紹了關(guān)于vue3+vite+ts使用monaco-editor編輯器的簡單步驟,需要的朋友可以參考下2023-01-01