【Vue3】shallowReactive() and shallowReadonly()

历史小剧场

所谓历史,就是过去的事,它的残酷之处在于:无论你哀嚎,悲伤,痛苦,落寞,追悔,它都无法改变。
一具有名的尸体躺在无数无名的尸体上,这就是所谓的霸业。---- 《明朝那些事儿》

shallowReactive

只有根级别的属性是响应式的
看案例

<!-- TestShallow.vue -->
<template><div><p>学号: {{ id }}&nbsp;&nbsp;姓名: {{ info.name }}</p><button @click="id++">点击增加学号</button><button @click="changeName">改变姓名</button></div>
</template><script lang="ts">
import { isReadonly, shallowReactive, shallowReadonly, toRefs } from 'vue';export default {name: 'TestShallow',setup() {type Student = {id: number,info: {name: string,}}const student = shallowReactive<Student>({id: 1,info: {name: '张三'  // 这里的name不是响应式的}})const changeName = () => {student.info.name = '莉丝'console.log("name => ", student.info.name)}return {...toRefs(student),changeName}}
}
</script><style lang="scss" scoped></style>

当我们点击增加学号时,界面上学号+1;
但是,我们点击修改姓名是,只有控制台打印的姓名变了,而界面上却没变。
这就是说明,这里在info里面的属性不是响应式的

shallowReadonly

只有根节点的属性是只读的

 const person = shallowReadonly({name: '新潮',info: {age: 25}})console.log("第一层 => ", isReadonly(person))       // trueconsole.log("第二层 => ", isReadonly(person.info))  // false

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

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

相关文章

C#操作MySQL从入门到精通(18)——使用组合查询

前言: 我们有时候需要使用多条select语句来获取查询结果,这时候就可以使用union这个关键字来实现组合查询,详细介绍如下: 1、union union这个组合查询,会自动将重复的行去掉 使用union来组合两条select语句 string sql = string.Empty;if (radioButton_UNION.Checked){…

SQL主键回显

目录 一 业务场景 二 如何使用 一 业务场景 当我们在一个业务功能下操作多张表时&#xff0c;当另一个表数据需要上一个表刚插入的数据的ID时&#xff0c;就需要使用到主键回显。 比如我现在有两张表&#xff0c;一张是菜品表&#xff0c;一张是口味表。而我一个菜品应该会有多…

关于Input【type=number】可以输入e问题及解决方案

一、为什么 因为在数学里e 代表无理数&#xff0c;e是自然对数的底数&#xff0c;同时它又是一个无限不循环小数&#xff0c;所以我们在输入 e 时&#xff0c;输入框会默认 e 是数字&#xff0c;从而没有对它进行限制。 二、解决方案 小提示&#xff1a;vue下监听事件需要加n…

Llama模型家族之Stanford NLP ReFT源代码探索 (二)Intervention Layers层

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

simulink中显示模块中的名字

simulink/matlab version: R2022a 改动前&#xff1a;X那里没有显示名字&#xff1b; 改动方法&#xff1a; 1&#xff09;鼠标左键点击待显示模块&#xff1b; 2&#xff09;菜单栏新增 模块这个选项&#xff1b; 3&#xff09;点击自动名称&#xff1b; 4) 点击名称打开…

Linux 内核参数-相关介绍

Linux 内核参数-相关介绍 今天&#xff0c;介绍Linux内核参数相关内容。由于Linux内核优化需要根据具体需求进行具体优化&#xff0c;同时需要具备一定经验&#xff0c;所以这里不涉及优化操作内容。 不过&#xff0c;遇到面试中有相关题目&#xff0c;不至于答不上来&#x…

leetcode-04-[24]两两交换链表中的节点[19]删除链表的倒数第N个节点[160]相交链表[142]环形链表II

一、[24]两两交换链表中的节点 重点&#xff1a;暂存节点 class Solution {public ListNode swapPairs(ListNode head) {ListNode dummyHeadnew ListNode(-1);dummyHead.nexthead;ListNode predummyHead;//重点&#xff1a;存节点while(pre.next!null&&pre.next.next…

LeetCode 第132场双周赛个人题解

100324. 清除数字 原题链接 100324. 清除数字 思路分析 一次遍历&#xff0c;相当于用栈进行括号匹配的压入弹出 时间复杂度O(n) AC代码 class Solution:def clearDigits(self, s: str) -> str:n len(s)res []cnt 0for x in s:if str.isdigit(x):res.pop()else:re…

你好GPT-4o——对GPT-4o发布的思考与看法

你好GPT-4o 前言 2024年5月13日&#xff0c;OpenAI官网发布了他们的新一代自然语言处理交互系统——GPT-4o。这是OpenAI继GPT4之后又一个新的旗舰模型。 GPT-4o&#xff08;“o”代表“omni”&#xff09;是迈向更自然的人机交互的一步——它接受文本、音频、图像和视频的任意…

单源最短路径算法 -- 迪杰斯科拉(Dijkstra)算法

1. 简介 迪杰斯科拉&#xff08;Dijkstra&#xff09;算法是一种用于在加权图中找到最短路径的经典算法。它是由荷兰计算机科学家Edsger Wybe Dijkstra在1956年首次提出的&#xff0c;并以他的名字命名。这个算法特别适合于解决单源最短路径问题&#xff0c;即计算图中一个顶点…

保姆级讲解 Redis的理论与实践

文章目录 Redis学习笔记一 、Redis简介1.1 什么是Redis1.2 NoSQL1.3 NoSQL的类别1.4 总结&#xff1a;1.5 Redis 描述1.6 Redis的特点1.7 Redis的应用场景1.8 Redis总结 二、Redis安装2.1 Redis官网2.2 Redis 安装2.3 安装gcc2.4 安装Redis2.5 安装到指定的位置 三 、Redis启动…

oracle dataguard 从库 MRP 进程的状态是 WAIT_FOR_GAP

因主库归档日志未备份直接删除后&#xff0c;从库不能更新&#xff0c;19c版本以上&#xff0c;之前未打补丁&#xff0c;使用 RECOVER STANDBY DATABASE FROM SERVICE PRM180;之后&#xff0c;在执行 alter database recover managed standby database using current logfil…

深入理解C语言:main函数的奥秘

在C语言中&#xff0c;main函数是每个程序的入口点&#xff0c;起着至关重要的作用。本文将深入探讨main函数的工作原理&#xff0c;包括其参数、返回值、以及如何从main启动程序的执行。通过实际代码示例&#xff0c;读者将更深入地理解main函数在C语言编程中的核心地位。 第一…

安装 JDK 17

安装包 百度网盘 提取码&#xff1a;6666 安装步骤 双击下载得到的安装包&#xff0c;开始安装&#xff1a; 正在安装&#xff1a; 安装完成&#xff1a; 安装路径下&#xff0c;多出来了很多新的内容。安装文件夹所包含的内容及作用&#xff1a; src 是 JDK 的源码包。类库…

正大国际期货:内盘与外盘的区别

内盘&#xff1a; 内盘通常指的是国内的期货市场或交易所&#xff0c;即在交易者所在国家内部进行交易的期货市场。 在中国&#xff0c;内盘通常是指中国国内的期货交易所&#xff0c;如上海期货交易所&#xff08;SHFE&#xff09;、大连商品交易所&#xff08;DCE&#xff…

【vue实战项目】通用管理系统:图表功能

目录 前言 1.概述 2.数据概览页 2.1.柱状图 2.2.折线图 2.3.地图 前言 本文是博主前端Vue实战系列中的一篇文章&#xff0c;本系列将会带大家一起从0开始一步步完整的做完一个小项目&#xff0c;让你找到Vue实战的技巧和感觉。 专栏地址&#xff1a; https://blog.csd…

Golang | Leetcode Golang题解之第134题加油站

题目&#xff1a; 题解&#xff1a; func canCompleteCircuit(gas []int, cost []int) int {for i, n : 0, len(gas); i < n; {sumOfGas, sumOfCost, cnt : 0, 0, 0for cnt < n {j : (i cnt) % nsumOfGas gas[j]sumOfCost cost[j]if sumOfCost > sumOfGas {break}…

openai 前员工释放出关于AGI的前世今生和未来发展趋势的详细报告

目录 1.引言2.AGI的临近3.投资与工业动员4.国家安全与AI竞赛5.技术挑战与机遇6.项目与政策7.结语8.原文PDF链接PS.扩展阅读ps1.六自由度机器人相关文章资源ps2.四轴机器相关文章资源ps3.移动小车相关文章资源 1.引言 2024年&#xff0c;我们站在了一个全新的科技前沿。在这篇文…

如何做好电子内窥镜的网络安全管理?

电子内窥镜作为一种常用的医疗器械&#xff0c;其网络安全管理对于保护患者隐私和医疗数据的安全至关重要。以下是一些基本原则和步骤&#xff0c;用于确保电子内窥镜的网络安全&#xff1a; 1. 数据加密 为了防止数据泄露&#xff0c;电子内窥镜在传输患者图像数据时应采取有…

Docker的资源限制

文章目录 一、什么是资源限制1、Docker的资源限制2、内核支持Linux功能3、OOM异常4、调整/设置进程OOM评分和优先级4.1、/proc/PID/oom_score_adj4.2、/proc/PID/oom_adj4.3、/proc/PID/oom_score 二、容器的内存限制1、实现原理2、命令格式及指令参数2.1、命令格式2.2、指令参…