Vue 定义只读数据 readonly 与 shallowReadonly

readonly 让一个响应式数据变为 **深层次的只读数据**。

shallowReadonly 让一个响应式数据变为 **浅层次的只读数据**,只读第一层。

isReadonly 判断一个数据是不是只读数据。

应用场景:不希望数据被修改时使用。


readonly深层次只读:

<template><h1>reactive数据</h1><p>姓名:{{ info.name }}</p><p>年龄:{{ info.age }}</p><button @click="editInfo">修改reactive数据</button><hr /><h1>readonly数据</h1><p>姓名:{{ readInfo.name }}</p><p>年龄:{{ readInfo.age }}</p><button @click="editReadInfo">修改readonly数据</button>
</template><script>
// 引入 readonly 与 reactive 函数
import { readonly, reactive } from 'vue'
export default {name: "Home",setup() {// 使用 reactive 创建数据const info = reactive({name: "张三",age: 20});// 使用 readonly 创建只读数据const readInfo = readonly(info);// 修改 reactive 数据const editInfo = () => {info.name = "李四";info.age = 22;console.log(info);console.log(readInfo);}// 修改 readonly 数据(警告,不会被修改)const editReadInfo = () => {readInfo.name = "李四";readInfo.age = 22;console.log(info);console.log(readInfo);}// 返回数据return {info,readInfo,editInfo,editReadInfo}}
}
</script>

:修改原数据时,只读的数据也会发生改变。

:修改只读的数据时,会触发警告提示数据不允许被修改。 

:readonly 返回的数据是不允许被修改的,但是可以修改原来的数据。并且原来的数据发生改变时,readonly 返回的数据也会发生改变。 

 shallowReadonly 浅层次只读:

<template><h1>readonly数据</h1><p>姓名:{{ readInfo.name }}</p><p>商品名称:{{ readInfo.shop.title }}</p><p>商品价格:{{ readInfo.shop.price }}</p><button @click="editReadInfo">修改readonly数据</button><hr /><h1>shallowReadonly数据</h1><p>姓名:{{ shallowInfo.name }}</p><p>商品名称:{{ shallowInfo.shop.title }}</p><p>商品价格:{{ shallowInfo.shop.price }}</p><button @click="editShallowInfo">修改shallowReadonly数据</button><hr />
</template><script>
// 引入 readonly、shallowReadonly、reactive 函数
import { readonly, shallowReadonly, reactive } from 'vue'
export default {name: "Home",setup() {// 使用 reactive 创建数据const readData = reactive({name: "张三",shop: {title: "灰太狼",price: 999}})// 使用 readonly 定义深层次的只读数据const readInfo = readonly(readData);// 使用 reactive 创建数据const shallowData = reactive({name: "李四",shop: {title: "喜洋洋",price: 666}})// 使用 shallowReadonly 定义浅层次的只读数据const shallowInfo = shallowReadonly(shallowData);// 修改 readonly 数据const editReadInfo = () => {readInfo.name = "张三丰";readInfo.shop.title = "红太狼";readInfo.shop.price = "199";console.log(readInfo);}// 修改 shallowReadonly 数据const editShallowInfo = () => {shallowInfo.name = "李四民";shallowInfo.shop.title = "懒洋洋";shallowInfo.shop.price = "166";console.log(shallowInfo);}// 返回数据return {readInfo,shallowInfo,editReadInfo,editShallowInfo,}}
}
</script>

当修改 readonly 数据时,不论多少层,都不允许被修改。

当修改 shallowReadonly 数据时,只有第一层不允许被修改,第二层及以后的数据是可以被修改的。 

原创作者:吴小糖

创作时间:2023.11.28

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/204785.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java实现王者荣耀小游戏

主要功能 键盘W,A,S,D键&#xff1a;控制玩家上下左右移动。按钮一&#xff1a;控制英雄发射一个矩形攻击红方小兵。按钮二&#xff1a;控制英雄发射魅惑技能&#xff0c;伤害小兵并让小兵停止移动。技能三&#xff1a;攻击多个敌人并让小兵停止移动。普攻&#xff1a;对小兵造…

VsCode学习

一、在VsCode 上编写第一个C语言 在VsCode上写代码都是先打开文件夹&#xff0c;这样也方便管理代码和编译器产生的可执行程序&#xff0c;VsCode生成的配置文件等。 1.1打开文件夹 写代码前&#xff0c;首先创立一个文件夹存储以后我们写的VsCode代码&#xff0c;便于管理。…

代码随想录算法训练营 ---第四十九天

前言&#xff1a; 今天是买卖股票的最佳时机系列&#xff0c;本系列之前在学习贪心思想时做过一些。 第一题&#xff1a; 简介&#xff1a; 本题在读题时我们要注意到几个细节 1.本题股票买卖只有一次。2.我们要在最低点买股票&#xff0c;在最高点卖股票。 我的思路&#…

skywalking告警UI界面有告警信息,webhook接口没有回调,400错误

400错误就是回调接口返回数据的属性对应不上 PostMapping(“/webhook”) public void webhook(RequestBody List alarmMessageList) 自定义的实体类AlarmMessage有问题 只能去官网找了 告警实体类官网 Getter EqualsAndHashCode RequiredArgsConstructor NoArgsConstructor(fo…

父进程隐藏——ConsoleApplication903项目

首先我发现用calc来做进程隐藏实验是失败的&#xff0c;父进程一直都是svhost.exe 那么我用我自己生成的cs木马beacon903.exe试试 试试explorer.exe 再试试cmd.exe 可以看到成功变成cmd.exe 可以看到我们可以通过这种方式虚假父进程 以上我们是直接获得的pid&#xff0c;那…

【Kotlin】类与接口

文章目录 类的定义创建类的实例构造函数主构造函数次构造函数init语句块 数据类的定义数据类定义了componentN方法 继承AnyAny&#xff1a;非空类型的根类型Any?&#xff1a;所有类型的根类型 覆盖方法覆盖属性覆盖 抽象类接口:使用interface关键字函数&#xff1a;funUnit:让…

听GPT 讲Rust源代码--src/tools(2)

题图来自AI生成 File: rust/src/tools/rust-analyzer/crates/hir-def/src/src.rs rust-analyzer 是一个 Rust 语言的语法分析器和语义分析器&#xff0c;用于提供代码补全、导航、重构等开发工具。而 rust-analyzer 的代码实现存储在 rust/src/tools/rust-analyzer 这个文件夹中…

亚马逊云科技 re:Invent 2023:引领科技前沿,探索未来云计算之窗

文章目录 一、前言二、什么是亚马逊云科技 re:Invent&#xff1f;三、亚马逊云科技 re:Invent 2023 将于何时何地举行四、亚马逊云科技 re:Invent 2023 有什么内容&#xff1f;4.1 亚马逊云科技 re:Invent 2023 主题演讲4.2 亚马逊云科技行业专家探实战 五、更多亚马逊云科技活…

Unity UGUI的自动布局-LayoutGroup(水平布局)组件

Horizontal Layout Group | Unity UI | 1.0.0 1. 什么是HorizontalLayoutGroup组件&#xff1f; HorizontalLayoutGroup是Unity UGUI中的一种布局组件&#xff0c;用于在水平方向上对子物体进行排列和布局。它可以根据一定的规则自动调整子物体的位置和大小&#xff0c;使它们…

万字详解,和你用RAG+LangChain实现chatpdf

像chatgpt这样的大语言模型(LLM)可以回答很多类型的问题,但是,如果只依赖LLM,它只知道训练过的内容,不知道你的私有数据:如公司内部没有联网的企业文档,或者在LLM训练完成后新产生的数据。(即使是最新的GPT-4 Turbo,训练的数据集也只更新到2023年4月)所以,如果我们…

141.【Git版本控制-本地仓库-远程仓库-IDEA开发工具全解版】

Git-深入挖掘 (一)、Git分布式版本控制工具1.目标2.概述(1).开发中的实际常见(2).版本控制器的方式(3).SVN (集中版本控制器)(4).Git (分布版本控制器)(5).Git工作流程图 (二)、Git安装与常用命令1.Git环境配置(1).安装Git的操作(2).Git的配置操作(3).为常用的指令配置别名 (可…

想成为网络安全工程师该如何学习?

一、网络安全应该怎么学&#xff1f; 1.计算机基础需要过关 这一步跟网安关系暂时不大&#xff0c;是进入it行业每个人都必须掌握的基础能力。 计算机网络计算机操作系统算法与数据架构数据库 Tips:不用非要钻研至非常精通&#xff0c;可以与学习其他课程同步进行。 2.渗透技…

.mat格式文件是什么?及将png,jpg,bmp,gif,tiff,psd等格式图片转为.mat格式(附代码)

很多深度学习网络的输入要求为.mat格式&#xff0c;当然也可以直接修改输入数据的代码&#xff0c;比如修改为使用OpenCV读取图片等&#xff0c;但有些网络修改起来比较麻烦&#xff0c;且.mat数据有很多优势&#xff0c;所以部分网络最好还是用默认的.mat格式数据 目录 一、.…

Gossip协议理解

概述 Gossip协议&#xff0c;又称epidemic协议&#xff0c;基于流行病传播方式的节点或进程之间信息交换的协议&#xff0c;在分布式系统中被广泛使用。 在1987年8月由施乐-帕洛阿尔托研究中心发表ACM上的论文《Epidemic Algorithms for Replicated Database Maintenance》中…

OpenStack云计算平台

目录 一、OpenStack 1、简介 2、硬件需求 3、网络 二、环境搭建 1、安全 2、主机网络 3、网络时间协议(NTP) 4、OpenStack包 5、SQL数据库 6、消息队列 7、Memcached 一、OpenStack 1、简介 官网&#xff1a;https://docs.openstack.org/2023.2/ OpenStack系统由…

RPA机器人如何解决非银企直联网银账户的数据自动采集?

数字时代来临&#xff0c;随着全球信息化水平的不断提升&#xff0c;企业们纷纷向自动化办公、数字化转型靠拢。财务部门作为一个企业的重要部门&#xff0c;承担着管理和监控公司所有项目的重要职责&#xff0c;因而一直被视为企业数字化转型的重要突破口。 由于企业经营理念和…

第二十章多线程

线程简介 java语言提供了并发机制&#xff0c;程序员可以在程序中执行多个线程&#xff0c;每一个线程完成一个功能&#xff0c;并与其他线程并发运行。 一个进程是一个包含有自身地址的程序&#xff0c;每个独立执行的程序都称为进程。也就是说每个正在执行的程序都是一个进程…

C语言错误处理之“非局部跳转<setjmp.h>头文件”

目录 前言 setjmp宏 longjmp函数 使用方法&#xff1a; 实例&#xff1a;测试setjmp与longjmp的使用 前言 通常情况下&#xff0c;函数会返回到它被调用的位置&#xff0c;我们无法使用goto语句改变它的返回的方向&#xff0c;因为goto语句只能跳转到同一函数内的某个标号…

python与机器学习1,机器学习的一些基础知识概述(完善ing)

目录 1 AI ,ML,DL,NN 等等概念分类 1.1 人工智能、机器学习、深度学习、神经网络之间的关系&#xff1a; 1.2 人工智能的发展 2 ML机器学习的分类&#xff1a;SL, USL,RL 2.1 机器学习的分类 2.2 具体的应用举例 2.3 数据分类 3 关于阈值θ和偏移量b的由来 4 不同的激…

中小型工厂如何进行数字化转型

随着科技的快速发展和市场竞争的日益激烈&#xff0c;中小型工厂面临着诸多挑战。为了提高生产效率、降低成本、优化资源配置&#xff0c;数字化转型已成为中小型工厂发展的必经之路。中小型工厂如何进行数字化转型呢&#xff1f; 一、明确数字化转型目标 在进行数字化转型之前…