欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年03月31日 12:33:49   作者:itclanCoder  
這篇文章主要為大家介紹了vueJs函數(shù)readonly與shallowReadonly使用對比詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

前言

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

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

那么readonlyshallowReadonly這兩個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é)

readonlyshallowReadonly都是讓響應(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)文章

  • vue里的data要用return返回的原因淺析

    vue里的data要用return返回的原因淺析

    這篇文章主要介紹了vue里的data要用return返回的原因淺析,需要的朋友可以參考下
    2019-05-05
  • Vue如何獲取數(shù)據(jù)列表展示

    Vue如何獲取數(shù)據(jù)列表展示

    這篇文章主要為大家詳細(xì)介紹了Vue如何獲取數(shù)據(jù)列表展示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • 關(guān)于vuejs中v-if和v-show的區(qū)別及v-show不起作用問題

    關(guān)于vuejs中v-if和v-show的區(qū)別及v-show不起作用問題

    v-if 有更高的切換開銷,而 v-show 有更高的出事渲染開銷.因此,如果需要非常頻繁的切換,那么使用v-show好一點;如果在運行時條件不太可能改變,則使用v-if 好點
    2018-03-03
  • vue在外部方法給下拉框賦值后不顯示label的解決

    vue在外部方法給下拉框賦值后不顯示label的解決

    這篇文章主要介紹了vue在外部方法給下拉框賦值后不顯示label的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue頁面跳轉(zhuǎn)動畫效果的實現(xiàn)方法

    Vue頁面跳轉(zhuǎn)動畫效果的實現(xiàn)方法

    百度了好久都沒辦法實現(xiàn)vue中一個頁面跳到另一個頁面,甚至到google上搜索也是沒辦法的,最終還是找了高人親自指導(dǎo),所以下面這篇文章主要給大家介紹了關(guān)于Vue頁面跳轉(zhuǎn)動畫效果的實現(xiàn)方法,需要的朋友可以參考下
    2018-09-09
  • Vue 全局loading組件實例詳解

    Vue 全局loading組件實例詳解

    這篇文章主要介紹了Vue 全局loading組件,需要的朋友可以參考下
    2018-05-05
  • vuex5中的Pinia插件機(jī)制

    vuex5中的Pinia插件機(jī)制

    這篇文章主要介紹了vuex5中的Pinia插件機(jī)制,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • Ant Design Vue如何生成動態(tài)菜單a-menu

    Ant Design Vue如何生成動態(tài)菜單a-menu

    這篇文章主要介紹了Ant Design Vue如何生成動態(tài)菜單a-menu問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • vue服務(wù)端渲染緩存應(yīng)用詳解

    vue服務(wù)端渲染緩存應(yīng)用詳解

    vue緩存分為頁面緩存、組建緩存、接口緩存,這里我主要說到了頁面緩存和組建緩存。接下來通過本文給大家介紹vue服務(wù)端渲染緩存應(yīng)用 ,需要的朋友可以參考下
    2018-09-09
  • vue3+vite+ts使用monaco-editor編輯器的簡單步驟

    vue3+vite+ts使用monaco-editor編輯器的簡單步驟

    因為畢設(shè)需要用到代碼編輯器,根據(jù)調(diào)研,我選擇使用monaco-editor代碼編輯器,下面這篇文章主要給大家介紹了關(guān)于vue3+vite+ts使用monaco-editor編輯器的簡單步驟,需要的朋友可以參考下
    2023-01-01

最新評論