vue3中的 readonly和shallowreadonly

最新推荐文章于 2025-07-04 15:36:12 发布
原创 最新推荐文章于 2025-07-04 15:36:12 发布 · 257 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue3

本文探讨了如何通过在参数中设置浅层只读属性，实现数据的不可修改，以增强应用的安全性和数据一致性。浅层只读特性在响应式编程中尤其重要，它允许数据视图的更新而不会意外改变原始数据源。同时，这种技术在前端框架如Vue和React中被广泛应用，用于构建不可变状态，确保组件的正确渲染。

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

shallowreadonly 浅层次的只读

vue3 readonly和shallowReadonly 应用
jieweiwujie的博客
03-19 129
只保证第一层次不能被修改 深层次的数据依旧会被修改下面的age是可以修改的id: '1',data:{age:12})
Vue3中的reactive，shallowReactive，ref，shallowRef；readonly，shallowReadonly； toRaw，markRaw简单介绍
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
02-11 688
reactive：深度劫持（深监视） shallowReactive：浅度劫持（浅监视） ref:深度劫持（深监视），做了reactive的处理 shallowRef：不做监视 readonly:只读属性的数据，深度只读 const state2 = readonly(state) shallowReadonly:只读的数据，浅只读的 toRaw: ·作用：将一个由reactive生成的响应式对象转为普通对象 ·使用场景：用于读取响应式对象对应的普通对象，对这个普通对象...
Vue3—— readonly与shallowReadonly
最新发布
weixin_63215361的博客
07-04 1186
readonly和。它们用于创建不可修改的响应式对象，任何对这些对象的修改操作都会被阻止（在开发环境下会触发警告），但对象仍然保持响应式特性——当原始响应式对象变化时，只读对象也会同步更新。核心特点禁止修改对象本身及其属性（开发环境有警告）仍然保持响应式（原始数据变化时，只读对象会同步更新）readonly递归应用只读，只应用于顶层属性常用于提供不可变的数据访问，如全局配置、状态快照等适用场景保护核心配置数据不被修改创建状态的只读副本，用于展示组件间共享只读数据。
Vue3 学习笔记 —— readonly 和 shallowReadonly
叹之
05-05 639
readonly 使用 readonly 函数包装过的对象，内部是深层次只读的 shallowReadonly 使用 shallowReadonly 函数包装过的对象，只有最外层属性是只读的，内层仍然可以改写 示例： <template> <button @click="change">改变</button> </template> <script lang="ts"> import { defineComponent, reado
Vue3: readonly与shallowreadonl
qq_48597462的博客
09-24 662
Vue3中的readonly和是两个用于创建只读响应式对象的函数。
readonly 与 shallowReadonly
qq_41167198的博客
11-12 96
readonly 与 shallowReadonly
【Vue3】readonly和shallowReadonly
owo_ovo的博客
04-01 641
【Vue3】readonly和shallowReadonly
vue3中的reactive、readonly和shallowReactive
m0_60189088的博客
04-28 917
readonly：拷贝一份proxy对象将其设置为只读。使用readonly时， 变量里的属性不可改变。当原本数据改变时，使用了readonly函数的值也会发生改变。在这个例子中，修改响应式对象中的age属性，readonly中的age属性也会随之更改。
vue3 响应式 API：readonly() 与 shallowReadonly()
咸鱼滚滚
09-06 556
readonly()是一个用于创建只读代理对象的函数。它接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。 shallowReadonly() 是 readonly() 的浅层作用形式，是一个用于创建浅层只读代理对象的函数。
手写shallowReadonly和readonly
温壁
12-29 337
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 231
正常情况下我们一般都是同步引入组件，但在同步引入的情况下，会有个问题，必须等所有的组件全部加载完成之后才会一起显示，例如有个嵌套组件外面几层的组件加载的都很快，但最里面的组件内容很多，加载的慢，但如果同步引入的话，外面的就需要一起等里面的加载完成之后才会一起显示，这样就很慢。、他们的用处不是特别大，只在极少数场景能用到，例如某一个公共功能，这个功能里面返回一个数据，这个数据在其他模块都是可以改的，但是在另一个模块不可改，也不能发生变化，只用来显示，此时就可以使用readonly。
vue3中readonly和shallowReadonly
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
11-25 1248
· readonly: 深度只读数据 获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。 只读代理是深层的：访问的任何嵌套 property 也是只读的。 · shallowReadonly 浅只读数据 创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换
vue3知识点：readonly 与 shallowReadonly
刘大猫
07-18 1462
vue3知识点：readonly 与 shallowReadonly
vue3笔记7之“readonly 与 shallowReadonly“
空投在我怀里的博客
06-15 226
一、其它 Composition APIreadonly: 让一个响应式数据变为只读的（深只读）。shallowReadonly：让一个响应式数据变为只读的（浅只读）。应用场景: 不希望数据被修改时。
Vue3中readonly 与 shallowReadonly的使用方法
李公子的博客
08-21 1833
readonly: 让一个响应式数据变为只读的（深只读）。 shallowReadonly： 让一个响应式数据变为只读的（浅只读）。 应用场景: 不希望数据被修改时。 代码演示 readonly 我们在代码中定义了一个响应式对象person 然后使用readonly(person )方法传入person 返回一个只读的对象 用p接收并返回 <template> <div> <h1...
Vue3响应式高阶用法之`shallowReadonly()`
weixin_42099070的博客
08-04 96
Vue3响应式高阶用法之shallowReadonly() 在现代前端开发中，Vue3 提供了丰富的响应式 API 来帮助开发者更高效地管理状态和数据。其中，shallowReadonly() 是一个非常有用的工具，适用于需要部分只读状态的场景。本文将详细介绍 shallowReadonly() 的使用方法及其应用场景。一...
Vue 3 数据只读处理：ShallowReadonly 与 readonly 全面解析
前端开发探索之旅
02-14 1288
readonly和都是 Vue 3 中用于创建只读数据的重要方法，它们在只读深度、性能影响和使用场景上存在差异。开发者可以根据具体需求选择合适的方法，以实现数据的有效保护和性能的优化。如果你在使用readonly或时遇到任何问题，或者有不同的见解，欢迎在评论区留言分享。希望本文能帮助你更好地理解和运用这两个方法，提升 Vue 3 开发的效率和质量。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
VUE3——readonly与shallowReadonly
CaseyWei
10-31 398
/ 输出 00.2 特点：· 对象的所有嵌套属性都将变为只读；· 任何尝试修改这个对象的操作都会被阻止，（在开发模式下，还会在控制台发出警告）。0.3 应用场景：· 创建不可变的快照· 保护全局状态配置不被修改特点：· 只将对象的第一层属性设置为只读，对象内部的嵌套属性仍然是可变的。· 适用于只需保护对象第一层属性的场景。
Vue3核心语法与新特性详解
Vue3作为当前前端开发领域中极为重要的JavaScript框架之一，代表了现代Web应用开发的主流方向。本文以“Vue3入门学习[源码]”为核心主题，系统性地介绍了从项目搭建到核心语法、响应式原理、组件通信机制、状态管理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值