vue3中的 readonly和shallowreadonly

最新推荐文章于 2025-07-04 15:36:12 发布
最新推荐文章于 2025-07-04 15:36:12 发布
阅读量237 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/MCCLS/article/details/120296476
本文探讨了如何通过在参数中设置浅层只读属性，实现数据的不可修改，以增强应用的安全性和数据一致性。浅层只读特性在响应式编程中尤其重要，它允许数据视图的更新而不会意外改变原始数据源。同时，这种技术在前端框架如Vue和React中被广泛应用，用于构建不可变状态，确保组件的正确渲染。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

参数中写入一个响应式的数据
就可以实现数据的无法修改

shallowreadonly 浅层次的只读

vue3 readonly和shallowReadonly 应用
jieweiwujie的博客
03-19 100
只保证第一层次不能被修改 深层次的数据依旧会被修改下面的age是可以修改的id: '1',data:{age:12})
Vue3中的reactive，shallowReactive，ref，shallowRef；readonly，shallowReadonly； toRaw，markRaw简单介绍
m0_51431448的博客
02-11 657
reactive：深度劫持（深监视） shallowReactive：浅度劫持（浅监视） ref:深度劫持（深监视），做了reactive的处理 shallowRef：不做监视 readonly:只读属性的数据，深度只读 const state2 = readonly(state) shallowReadonly:只读的数据，浅只读的 toRaw: ·作用：将一个由reactive生成的响应式对象转为普通对象 ·使用场景：用于读取响应式对象对应的普通对象，对这个普通对象...
Vue3 学习笔记 —— readonly 和 shallowReadonly
叹之
05-05 601
readonly 使用 readonly 函数包装过的对象，内部是深层次只读的 shallowReadonly 使用 shallowReadonly 函数包装过的对象，只有最外层属性是只读的，内层仍然可以改写 示例： <template> <button @click="change">改变</button> </template> <script lang="ts"> import { defineComponent, reado
Vue3: readonly与shallowreadonl
qq_48597462的博客
09-24 627
Vue3中的readonly和是两个用于创建只读响应式对象的函数。
readonly 与 shallowReadonly
qq_41167198的博客
11-12 87
readonly 与 shallowReadonly
Vue3—— readonly与shallowReadonly
最新发布
weixin_63215361的博客
07-04 1028
readonly和。它们用于创建不可修改的响应式对象，任何对这些对象的修改操作都会被阻止（在开发环境下会触发警告），但对象仍然保持响应式特性——当原始响应式对象变化时，只读对象也会同步更新。核心特点禁止修改对象本身及其属性（开发环境有警告）仍然保持响应式（原始数据变化时，只读对象会同步更新）readonly递归应用只读，只应用于顶层属性常用于提供不可变的数据访问，如全局配置、状态快照等适用场景保护核心配置数据不被修改创建状态的只读副本，用于展示组件间共享只读数据。
【Vue3】readonly和shallowReadonly
owo_ovo的博客
04-01 571
【Vue3】readonly和shallowReadonly
vue3中的reactive、readonly和shallowReactive
m0_60189088的博客
04-28 850
readonly：拷贝一份proxy对象将其设置为只读。使用readonly时， 变量里的属性不可改变。当原本数据改变时，使用了readonly函数的值也会发生改变。在这个例子中，修改响应式对象中的age属性，readonly中的age属性也会随之更改。
Vue3的Composition组合式API(readonly与shallowReadonly函数、toRaw与markRaw函数、customRef函数)
Bulut0907
10-24 1149
效果如下：在输入框的hello后面，快速的输入123，过一段时间，下面的hello也更新为hello123。再点击修改姓名，页面重新渲染，会将之前对markRaw的person.car的数据的改变也更新到页面。点击先获取再改变最原始的person信息，页面没有发生变化，但其实person的数据已经改变了。同时也会出现改变车的价格按钮。点击改变车的价格，页面没有发生变化，但其实person.car的数据已经改变了。再点击修改姓名，页面重新渲染，会将之前对toRaw数据的改变也更新到页面。
手写shallowReadonly和readonly
温壁
12-29 313
1、shallowReadonly const shallowReadonlyHandler = { get(target,prop){ console.log('执行了数据的获取操作'); return Reflect.get(target,prop); }, set(target,prop,val){ console.warn('只读数据不能进行更改或添加操作'); return true; },
07/06 readonly和shallowReadonly、toRaw和markRaw、provide和inject、isRef，teleport和suspense
tdl081071tdy的博客
07-06 171
正常情况下我们一般都是同步引入组件，但在同步引入的情况下，会有个问题，必须等所有的组件全部加载完成之后才会一起显示，例如有个嵌套组件外面几层的组件加载的都很快，但最里面的组件内容很多，加载的慢，但如果同步引入的话，外面的就需要一起等里面的加载完成之后才会一起显示，这样就很慢。、他们的用处不是特别大，只在极少数场景能用到，例如某一个公共功能，这个功能里面返回一个数据，这个数据在其他模块都是可以改的，但是在另一个模块不可改，也不能发生变化，只用来显示，此时就可以使用readonly。
vue3中readonly和shallowReadonly
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
11-25 1171
· readonly: 深度只读数据 获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。 只读代理是深层的：访问的任何嵌套 property 也是只读的。 · shallowReadonly 浅只读数据 创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换
vue3知识点：readonly 与 shallowReadonly
刘大猫
07-18 1398
vue3知识点：readonly 与 shallowReadonly
vue3笔记7之“readonly 与 shallowReadonly“
空投在我怀里的博客
06-15 212
一、其它 Composition APIreadonly: 让一个响应式数据变为只读的（深只读）。shallowReadonly：让一个响应式数据变为只读的（浅只读）。应用场景: 不希望数据被修改时。
Vue3中readonly 与 shallowReadonly的使用方法
李公子的博客
08-21 1787
readonly: 让一个响应式数据变为只读的（深只读）。 shallowReadonly： 让一个响应式数据变为只读的（浅只读）。 应用场景: 不希望数据被修改时。 代码演示 readonly 我们在代码中定义了一个响应式对象person 然后使用readonly(person )方法传入person 返回一个只读的对象 用p接收并返回 <template> <div> <h1...
Vue3响应式高阶用法之`shallowReadonly()`
weixin_42099070的博客
08-04 74
Vue3响应式高阶用法之shallowReadonly() 在现代前端开发中，Vue3 提供了丰富的响应式 API 来帮助开发者更高效地管理状态和数据。其中，shallowReadonly() 是一个非常有用的工具，适用于需要部分只读状态的场景。本文将详细介绍 shallowReadonly() 的使用方法及其应用场景。一...
Vue 3 数据只读处理：ShallowReadonly 与 readonly 全面解析
前端开发探索之旅
02-14 1108
readonly和都是 Vue 3 中用于创建只读数据的重要方法，它们在只读深度、性能影响和使用场景上存在差异。开发者可以根据具体需求选择合适的方法，以实现数据的有效保护和性能的优化。如果你在使用readonly或时遇到任何问题，或者有不同的见解，欢迎在评论区留言分享。希望本文能帮助你更好地理解和运用这两个方法，提升 Vue 3 开发的效率和质量。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
VUE3——readonly与shallowReadonly
CaseyWei
10-31 368
/ 输出 00.2 特点：· 对象的所有嵌套属性都将变为只读；· 任何尝试修改这个对象的操作都会被阻止，（在开发模式下，还会在控制台发出警告）。0.3 应用场景：· 创建不可变的快照· 保护全局状态配置不被修改特点：· 只将对象的第一层属性设置为只读，对象内部的嵌套属性仍然是可变的。· 适用于只需保护对象第一层属性的场景。
vue3中 proxy
05-05
除了 `reactive` 函数外，Vue 3 还提供了其他一些 API 来创建代理对象，比如 `readonly`、`shallowReactive`、`shallowReadonly` 等，不同的 API 可以实现不同的代理效果，具体可以根据需要选择使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值