Vue3响应式高阶用法之`shallowReadonly()`

Vue3响应式高阶用法之shallowReadonly()

在现代前端开发中,Vue3 提供了丰富的响应式 API 来帮助开发者更高效地管理状态和数据。其中,shallowReadonly() 是一个非常有用的工具,适用于需要部分只读状态的场景。本文将详细介绍 shallowReadonly() 的使用方法及其应用场景。

一、简介

shallowReadonly() 是 Vue3 提供的一个响应式 API,用于将对象的顶层属性设为只读。与 readonly 不同的是,shallowReadonly 只会影响对象的顶层属性,不会递归地使对象内部的属性也变为只读。

二、使用场景

shallowReadonly() 适用于以下场景:

  1. 顶层属性不变但内部属性可变:当你的业务需求要求对象的顶层属性保持不变,但允许修改内部嵌套对象或数组时。
  2. 性能优化:相比于 readonly 的深度只读,shallowReadonly() 只作用于顶层属性,性能开销更小。

三、基本使用

下面是一个简单的例子,展示了如何使用 shallowReadonly()

<script lang="ts" setup>
import { shallowReadonly } from 'vue';const state = {name: '天天鸭',profile: {age: 18,address: {city: '广州',}}
};
const shallowState = shallowReadonly(state);// 这将会抛出错误,因为顶层属性是只读的
shallowState.name = 'change天天鸭';// 这是可以的,因为 `profile` 对象没有被设为只读
shallowState.profile.age = 31; // 同样,`address` 对象也可以被修改
shallowState.profile.address.city = '深圳';
</script>

四、功能详解

4.1 顶层属性只读

shallowReadonly() 会将对象的顶层属性设为只读,任何尝试修改顶层属性的操作都会抛出错误。

shallowState.name = 'change天天鸭'; // 抛出错误

4.2 内部属性可变

对象内部的嵌套属性不会受到影响,可以自由修改。

shallowState.profile.age = 31; // 正常修改
shallowState.profile.address.city = '深圳'; // 正常修改

五、最佳实践及案例

5.1 保持顶层状态稳定

在某些应用场景中,可能需要保证对象的顶层状态不变,例如全局配置对象。使用 shallowReadonly() 可以有效防止误操作导致的顶层属性修改。

const config = shallowReadonly({apiEndpoint: 'https://api.example.com',timeout: 5000,options: {retry: true,retryCount: 3}
});// 顶层属性不可修改
config.apiEndpoint = 'https://api.newexample.com'; // 抛出错误// 内部属性可修改
config.options.retry = false; // 正常修改

5.2 动态表单数据

在动态表单中,可能需要确保表单的结构(顶层属性)不变,但允许用户修改表单内容(内部属性)。

const formData = shallowReadonly({fields: [{ name: 'username', value: '' },{ name: 'email', value: '' }]
});// 顶层属性不可修改
formData.fields = []; // 抛出错误// 内部属性可修改
formData.fields[0].value = 'newUsername'; // 正常修改

六、总结

shallowReadonly() 是 Vue3 中一个非常实用的响应式 API,适用于需要部分只读状态的场景。通过将对象的顶层属性设为只读,可以有效防止误操作,同时允许内部属性的自由修改,提供了灵活性和性能优化的双重优势。希望本文能帮助你更好地理解和使用 shallowReadonly(),提升你的 Vue3 开发体验。

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

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

相关文章

小白学习webgis的详细路线

推荐打开boss直聘搜索相关岗位&#xff0c;查看岗位要求&#xff0c;对症下药是最快的。 第一阶段&#xff1a;基础知识准备 计算机基础 操作系统&#xff1a;理解Windows、Linux或macOS等操作系统的基本操作&#xff0c;学会使用命令行界面。网络基础&#xff1a;掌握TCP/I…

triu三角矩阵案例演示

def subsequent_mask(size):"""生成向后遮掩的掩码张量, 参数size是掩码张量最后两个维度的大小, 它的最后两维形成一个方阵"""# 在函数中, 首先定义掩码张量的形状attn_shape (1, size, size)# 然后使用np.ones方法向这个形状中添加1元素,形成…

平价不入耳运动耳机哪款最好?五款回购榜优品种草

许多有健身运动习惯的朋友在选择耳机时会优先考虑不入耳耳机&#xff0c;因为它佩戴舒适&#xff0c;稳固性和安全性更高&#xff0c;不仅在运动时不会轻易掉落&#xff0c;还能够方便我们在进行户外运动时接收外界的声音。那么&#xff0c;平价不入耳运动耳机哪款最好&#xf…

docker-compose 根据yaml拉取镜像出问题

在学习go微服务时&#xff0c;用docker-compose启动nacos以及对应的mysql时出现上面的问题&#xff0c; 使用的yaml如下 version: "3.8" services:nacos:image: nacos/nacos-server:${NACOS_VERSION}container_name: nacos-standalone-mysqlenv_file:- ../env/cust…

javaEE(1)

一. Web开发概述 Web开发:指的是从网页中向后端程序发送请求,与后端程序进行交互 Web服务器:是一种软件,向浏览器等Web客户端提供文档等数据,实现数据共享,它是一个容器,是一个连接用户和程序之间的中间键 二. Web开发环境搭建 我们要实现前后端交互,首先需要中间键Web服务…

重生之“我打数据结构,真的假的?”--6.排序

1.排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使⼀串记录&#xff0c;按照其中的某个或某些关键字的⼤⼩&#xff0c;递增或递减的排列起来的 操作。 1.1排序分类 2.排序算法实现 2.1插入排序 直接插⼊排序是⼀种简单的插⼊排序法&#xff0c;其基本思想是&#…

【Nginx】Windows生成ssl证书,Nginx反向代理HTTPS

下载 OpenSSL 环境 Windows、Linux, 证书我是在Windows上生成的自签证书。 https://slproweb.com/products/Win32OpenSSL.htmlWin64 OpenSSL v3.3.1 EXE&#xff08;这个&#xff09; | MSISelect Additional Tasks页面勾选 The OpenSSL binaries (/bin) directory 然后将Op…

一篇文章学完Python基础

1. 字符串 str1 "Hello" str2 " World" print(str1 str2) # 输出&#xff1a;HelloWorld 1.1 字符替换 text "Hello, World!" new_text text.replace("World", "Python") print(new_text) # 输出&#xff1a;…

2024第八届自然语言处理与信息检索国际会议 (NLPIR 2024)即将召开!

2024第八届自然语言处理与信息检索国际会议 (NLPIR 2024)将于2024年12月13-15日在日本冈山的冈山大学举行。NLPIR 2024将为自然语言处理与信息检索领域的专家学者提供一个交流与合作的平台&#xff0c;推动该领域的学术进步和技术创新。同时&#xff0c;本次会议也将为相关企业…

Golang 高性能 Websocket 库 gws 使用与设计(一)

前言 大家好这里是&#xff0c;白泽&#xff0c;这期分析一下 golang 开源高性能 websocket 库 gws。 视频讲解请关注&#x1f4fa;B站&#xff1a;白泽talk 介绍 gws&#xff1a;https://github.com/lxzan/gws &#xff5c;GitHub &#x1f31f; 1.2k&#xff0c;高性能的 …

0724,select +tcp 聊天室喵

目录 TCP协议喵 723__01&#xff1a;使用select实现一个基于UDP的一对一即时聊天程序。 001: 002: TIMEWAI OR BUG 721作业&#xff1a; 01&#xff1a;在一对一聊天的基础上&#xff0c;使用select实现一对多的回显服务。&#xff08;回显服务即接收到客户端发送的数…

Pyppeteer 的使用

puppeteer 是基于Node.js 开发的一个工具, 有了它&#xff0c;我们可以利用 JavaScript 控制 Chrome 浏览器的一些操作。当然&#xff0c; puppeteer 也可以用于网络爬虫&#xff0c;其 API 及其完善&#xff0c;功能非常强大。 Pyppeteer 其实是 puppeteer 的 python 实现&…

Selenium clear无效解决办法

在使用 Selenium 时,有时会遇到 clear() 方法不起作用的情况,尤其是在一些输入框元素上。这可能是由于浏览器或网站的实现方式导致的。以下是一些解决 clear() 无效问题的方法: 1. 使用 sendKeys 删除字符 使用 sendKeys 方法发送键盘事件来模拟删除键,从而清空输入框的内…

Unity Animator: 角色动画的得力助手

在Unity游戏开发中&#xff0c;Animator组件是实现角色动画的关键工具。它提供了一个强大而灵活的系统&#xff0c;用于控制角色的动作和表情&#xff0c;以及它们在不同状态之间的过渡。本文将深入探讨Unity Animator的基本概念、功能和使用技巧。 Unity Animator简介 Unity…

.net 连接达梦数据库开发环境部署

.net 开发环境部署 1. 环境准备 测试工具 Visual Studio2022 数据库版本 dm8 2. 搭建过程 1 &#xff09;创建新项目 2 &#xff09;选择创建空项目 3 &#xff09;配置新项目 4 &#xff09;右键 DM1 新建一个项 5 &#xff09;加 载 驱 动 &#xff0c; 新 建 …

面试问题记录:

1&#xff0c;hashmap扩容的时候&#xff0c;链表超长但不满足转变成红黑树的条件时&#xff1a; 【HashMap】链表和红黑树互相转换的几种情况和数组的扩容机制_hashmap红黑树转链表条件-CSDN博客 2&#xff0c;cglib与proxy区别 JDK 动态代理和 CGLIB 动态代理对比_动态代理…

0722_驱动3 地址映射驱动点灯

一、为什么需要地址映射 在芯片手册上查看到的地址属于物理地址&#xff0c;在硬件层 在内核空间地址属于虚拟地址&#xff0c;在内核层 在驱动中&#xff0c;操作的是虚拟地址 需要将物理地址《--mmu内存管理单元--》虚拟地址映射 二、映射API接口 void *ioremap(unsigned lon…

backtrace

介绍 arm平台的调用栈与x86平台的调用栈大致相同&#xff0c;稍微有些区别&#xff0c;主要在于栈帧的压栈内容和传参方式不同。在arm平台的不同程序&#xff0c;采用的编译选项不同&#xff0c;程序运行期间的栈帧也会不同。有些工具在对arm的调用栈回溯时&#xff0c;可能会…

电商项目之如何判断线程池是否执行完所有任务

文章目录 1 问题背景2 前言3 4种常用的方法4 代码4.1 isTerminated()4.2 线程池的任务总数是否等于已执行的任务数4.3 CountDownLatch计数器4.4 CyclicBarrier计数器 1 问题背景 真实生产环境的电商项目&#xff0c;常使用线程池应用于执行大批量操作达到高性能的效果。应用场景…

Dify中语音和文字间转换问题的一种暂时注释方式

本文主要解释了Dify中语音和文字间转换可能会遇到的问题&#xff0c;并给出了一种暂时注释的解决方案。 一.文本转语音可能问题 本地部署文本转语音时&#xff0c;如果遇到如下问题&#xff0c;安装ffmpeg即可。但是如果安装后&#xff0c;重启系统还是遇到这个问题该如何办&…