vue函數readonly與shallowReadonly如何使用

今天小編給大家分享一下vue函數readonly與shallowReadonly如何使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

前言

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

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

那么readonly與shallowReadonly這兩個API就很有用了的

readonly

讓一個響應式數據變為只讀的,接收一個響應式數據,經過readonly加工處理一下,那么新賦值的數據都不允許修改

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

頁面沒有更新有兩種情況

[1]. 數據修改了,但數據不是響應式,vue監測不到

[2]. 數據壓根就沒有更改

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

使用readonly對響應式數據包裹處理一下后,則再次修改數據時,頁面數據不會更新

shallowreadonly

接收一個響應式數據,經過shallowreadonly的處理,變成一個只讀的,只考慮對象的第一層數據,不可以修改,但是第一層嵌套里的深層數據卻支持修改

讓一個響應式數據變為只讀能力(淺只讀)

應用場景: 不希望數據被修改,當數據是從別的地方取過來,不希望影響源數據

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

以上就是“vue函數readonly與shallowReadonly如何使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。