Vue 定义只读数据 readonly 与 shallowReadonly

news2024/11/24 9:01:41

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.coloradmin.cn/o/1265687.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Matplotlib直方图的创建_Python数据分析与可视化

Matplotlib直方图的创建 概念区分绘制直方图 概念区分 什么是直方图&#xff1f; 直方图&#xff08;Histogram&#xff09;又称质量分布图&#xff0c;是统计报告图的一种&#xff0c;由一系列高度不等的纵向条纹或线段表示数据分布的情况&#xff0c;一般用横轴表示数据所属…

16.spirng源码解析-registerBeanPostProcessors

注册拦截bean创建的bean处理器 此部分实质上是在BeanDefinitions中寻找BeanPostProcessor&#xff0c;之后调用BeanFactory.addBeanPostProcessor方法保存在一个List中&#xff0c;注意添加时仍然有优先级的概念&#xff0c;优先级高的在前面。

ESP-Mesh-Lite 用户指南

ESP-MESH-LITE 本指南提供有关 Mesh-Lite 协议的介绍。 概述 ESP-MESH-LITE 是一套建立在 Wi-Fi 协议之上的网络协议。ESP-MESH-LITE 允许分布在大范围区域内&#xff08;室内和室外&#xff09;的大量设备&#xff08;下文称节点&#xff09;在同一个 WLAN&#xff08;无线…

聚观早报 |红魔9 Pro开卖;真我GT5 Pro定档

【聚观365】11月29日消息 红魔9 Pro开卖 真我GT5 Pro定档 一加12镜头细节公布 Redmi K70 Pro将搭载夜枭算法 苹果Vision Pro头显下月量产 红魔9 Pro开卖 红魔电竞旗舰最新力作——红魔9 Pro系列正式发布。作为一款全能电竞旗舰&#xff0c;该机搭载了第三代骁龙8移动平台…

如何恢复已删除的照片 ?适用于 Windows 的Android 数据恢复软件值得尝试

“我丢失了 Android 手机上的照片&#xff0c;有人告诉我使用恢复程序来找回所有手机数据。我使用的是 Windows 10 和华为 手机&#xff0c;对于 Windows最有效的 Android 数据恢复是什么&#xff1f;” Android 恢复程序用于检索丢失或删除的文件&#xff0c;如照片、联系人、…

pytorch读取tiny-imagenet-200的验证集(val)

ori_train torchvision.datasets.ImageFolder(root args.datadir /tiny-imagenet-200/train/, transformtransform)#可以获取class_idx的映射class_idx ori_train.class_to_idx val_annotations.txt中存储着每个图片对应的类别 获取验证集的标签 test_target []#读取val_…

uniapp微信小程序中阻止事件冒泡

开发场景&#xff1a;列表中展示地块的数据信息&#xff0c;用户可以点击列表进入地块的详情界面&#xff0c;也可以点击列表中的星星按钮进行收藏 遇到的问题&#xff1a;每次点击星星的时候&#xff0c;都会触发父级的点击事件&#xff0c;从而进入到详情界面 原本的代码&am…

红队攻防之hash登录RDP

没什么好害怕&#xff0c;孩子放心去飞吧&#xff0c;在你的身后有个等你的家 Restricted Admin Mode 受限管理模式是一项 Windows 功能&#xff0c;可防止将 RDP 用户的凭据存储在建立 RDP 连接的计算机的内存中。 这是用来防止用户&#xff08;管理员&#xff09;在 RDP 进…

VT-VSPA1-1X比例压力阀控制板

替代力士乐同型号,可以完全互换使用&#xff1b;适用于力士乐系列所有无电位置反馈的直动式和先导式比例压力阀的控制&#xff1b;外置欧板式连接&#xff0c;VT-VSPA1-1X型放大器配套支架型号&#xff1a;VT-3002-1X/32D或VT-3002-2X/32D&#xff1b; VT-VSPA2-1-1X/T1、VT-V…

面试必须要知道的MySQL知识--索引

10 索引 10.1 数据页存储结构 10.1.1 数据页的各个部分 在讲索引之前&#xff0c;让我们看看一个单独的数据页是什么样子的 去除掉一些我们不太需要那么关注的部分后&#xff0c;简化如下&#xff1a; 也就是说平时我们在一个表里插入的一行一行的数据会存储在数据页里&#…

DDR-MIG 学习记录

MIG调试总结&#xff1a; 对vivado软件中用于控制DDR2 / DDR3 的 控制器MIG(Memory Interface Generator)IP核进行了仿真测试&#xff0c;以学习如何用IP核来控制FPGA板载SDRAM的读写。我们只需要学会MIG的接口控制就可以。 ①配置IP核 Xilinx 的 DDR 控制器的名称简写为 MIG&…

解密Long型数据传递:Spring Boot后台如何避免精度丢失问题

前端和后端之间的数据传递至关重要。然而&#xff0c;当涉及到Long类型数据时&#xff0c;可能会出现精度丢失问题&#xff0c;这会影响数据的准确性。本文将为你介绍两种解决方案&#xff0c;帮助你确保Long类型数据在前端和后端之间的精确传递。 精度丢失测试 访问:http://l…

深度学习可解释性Python库

本文整理了10个常用于可解释AI的Python库&#xff0c;方便我们更好的理解AI模型的决策。 原文阅读 什么是XAI&#xff1f; XAI&#xff08;Explainable AI&#xff09;的目标是为模型的行为和决策提供合理的解释&#xff0c;这有助于增加信任、提供问责制和模型决策的透明度…

SAP FB01 更新采购凭证历史EKBE

参考链接BAPI_ACC_DOCUMENT_POST – Vendor Down payment: Update Purchase order info and PO history 不需要链接里的替代过程&#xff0c;可以直接写在函数BAPI_ACC_DOCUMENT_POST的增强结构EXTENSION2里 需要复制BTE增强1050 在其中调用函数ME_CREATE_HISTORY_FINANCE 即…

工具 | docker删除不使用的容器

工具 | docker删除不使用的容器 Docker 清理命令

ESP32-Web-Server 实战编程-通过网页控制设备的 GPIO

ESP32-Web-Server 实战编程-通过网页控制设备的 GPIO 概述 前述博客讲解了 Web 编程的基本知识&#xff0c;包括 HTML、CSS、JavaScript 三个部分&#xff0c;从这节开始&#xff0c;我们进入实战部分&#xff0c;在实际项目中进一步学习 ESP32-Web 编程。 GPIO &#xff08…

产品解读:GreatADM如何快速改造单实例为双主、MGR、读写分离架构?

前言 单机GreatDB/GreatSQL/MySQL将架构调整为多副本复制的好处有哪些&#xff1f;为什么要调整&#xff1f; 性能优化&#xff1a;如果单个GreatDB服务器的处理能力达到瓶颈&#xff0c;可能需要通过主从复制、双主复制或MGR及其他高可用方案来提高整体性能。通过将读请求分发…

免交互语法expect

目录 前瞻 相关命令 范例一&#xff1a;免密登录另外一台主机并创建用户 范例二&#xff1a;免密登录另外三台主机并创建用户 前瞻 expect是建立在tcl&#xff08;tool command language&#xff09;语言基础上的一个工具&#xff0c;常被用于进行自动化控制和测试&#xf…

前后端分离开发出现的跨域问题

先说说什么是跨域。 请求的URL地址中的协议、域名、端口号中的任意一个与当前URL不同就是跨域。 比如&#xff1a; 当前页面的URL请求的URL是否跨域原因htttp://localhost:8080htttps://localhost:8080是协议不同htttp://localhostll:8080htttp://localhost:8080是域名不同htt…

校园跑腿的核心功能

校园跑腿是指在校园内提供各种代办和服务的便利服务。 1. 快速送货&#xff1a;校园跑腿可以提供快速的送货服务&#xff0c;包括食品、快递、文件等物品的送达。 2. 打印复印&#xff1a;校园跑腿可以提供打印、复印等文档处理服务&#xff0c;方便学生和教职工处理各种文档…