温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue函数readonly与shallowReadonly如何使用

发布时间:2023-03-31 14:03:56 来源:亿速云 阅读:78 作者:iii 栏目:开发技术

今天小编给大家分享一下vue函数readonly与shallowReadonly如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

前言

在使用vue3开发项目时,对于一些特殊的需求,针对有些数据字段,在前端,只允许读取,不允许修改,比如:有的网站用户名,一旦注册了,就不允许修改

当然,有时候,我们从别的地方引用数据过来,用作信息的展示,但是却不允许修改,不希望影响源数据

那么readonlyshallowReadonly这两个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如何使用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI