当前位置: 首页 > news >正文

【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

相关文章:

【Vue3】shallowReactive() and shallowReadonly()

历史小剧场 所谓历史&#xff0c;就是过去的事&#xff0c;它的残酷之处在于&#xff1a;无论你哀嚎&#xff0c;悲伤&#xff0c;痛苦&#xff0c;落寞&#xff0c;追悔&#xff0c;它都无法改变。 一具有名的尸体躺在无数无名的尸体上&#xff0c;这就是所谓的霸业。---- 《明…...

【javaEE初阶】

&#x1f308;&#x1f308;&#x1f308;关于java ⚡⚡⚡java的由来 我们这篇文章主要是来介绍javaEE&#xff0c;一般称为java企业版&#xff0c;实际上java的历史可以追溯到上个世纪90年代&#xff0c;当时主要的语言主流的还是C语言和C&#xff0c;但是在那个时期嵌入式初…...

深度学习 - 梯度下降优化方法

梯度下降的基本概念 梯度下降&#xff08;Gradient Descent&#xff09;是一种用于优化机器学习模型参数的算法&#xff0c;其目的是最小化损失函数&#xff0c;从而提高模型的预测精度。梯度下降的核心思想是通过迭代地调整参数&#xff0c;沿着损失函数下降的方向前进&#…...

Steam下载游戏很慢?一个设置解决!

博主今天重装系统后&#xff0c;用steam下载发现巨慢 500MB&#xff0c;都要下载半小时。 平时下载软件&#xff0c;一般1分钟就搞定了&#xff0c;于是大致就知道&#xff0c;设置应该出问题了 于是修改了&#xff0c;如下设置之后&#xff0c;速度翻了10倍。 如下&#x…...

51单片机采用定时器T1的方式1的中断计数方式,外接开关K4按4次后,8只LED闪烁不停

1、功能描述 采用定时器T1的方式1的中断计数方式&#xff0c;外接开关K4按4次后&#xff0c;8只LED闪烁不停 2、实验原理 定时器原理:8051的定时器可以用于计数外部事件或执行内部定时操作。在本程序中&#xff0c;定时器1被设置为模式2&#xff0c;即8位自动重装载定时器模式…...

windows系统 flutter 开发环境配置

1、管理员运行powershell&#xff0c;安装&#xff1a;Chocolatey 工具&#xff0c;粘贴复制运行下列脚本: Chocolatey 官方安装文档 Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol [System.Net.ServicePointManage…...

【线性代数】SVDPCA

用最直观的方式告诉你&#xff1a;什么是主成分分析PCA_哔哩哔哩_bilibili 奇异值分解singular value decomposition&#xff0c;SVD principal component analysis,PCA 降维操作 pca就是降维后使得信息损失最小 投影在坐标轴上的点越分散&#xff0c;信息保留越多 pca的实现…...

1.Vue2使用ElementUI-初识及环境搭建

目录 1.下载nodejs v16.x 2.设置淘宝镜像源 3.安装脚手架 4.创建一个项目 5.项目修改 代码地址&#xff1a;source-code: 源码笔记 1.下载nodejs v16.x 下载地址&#xff1a;Node.js — Download Node.js 2.设置淘宝镜像源 npm config set registry https://registry.…...

OS复习笔记ch7-3

承接上文我们讲完了页式管理和段式管理&#xff0c;接下来让我们深入讲解一下快表和二级页表 快表 快表和计算机组成原理讲的Cache原理如出一辙。为了减少访存的次数&#xff0c;OS在访问页面的时候创建了快表&#xff08;Translation Lookaside Buffer &#xff0c;简称TLB&…...

MFC 教程-回车时窗口退出问题

【问题描述】 MFC窗口默认时&#xff0c;按回车窗口会退出 【原因分析】 默认调用OnOK() 【解决办法】 重写虚函PreTranslateMessage BOOL CTESTMFCDlg::PreTranslateMessage(MSG* pMsg) {// TODO: 在此添加专用代码和/或调用基类// 修改回车键的操作反应 if (pMsg->…...

CTFHUB-SQL注入-字符型注入

目录 查询数据库名 查询数据库中的表名 查询表中数据 总结 此题目和上一题相似&#xff0c;一个是整数型注入&#xff0c;一个是字符型注入。字符型注入就是注入字符串参数&#xff0c;判断回显是否存在注入漏洞。因为上一题使用手工注入查看题目 flag &#xff0c;这里就不…...

Docker配置Redis集群以及主从扩容与缩容

基础镜像拉取 docker run -p 6379:6379 -d redis:6.0.8 配置文件以及数据卷挂载 # 开启密码验证&#xff08;可选&#xff09; requirepass 1234 # 允许redis外地连接&#xff0c;需要注释掉绑定的IP # bind 127.0.0.1 # 关闭保护模式&#xff08;可选&#xff09; protected-m…...

【计算机网络】 传输层

一、传输层提供的服务 1.1 传输层的功能 1.1.1 传输层的功能如下&#xff1a; 传输层提供应用进程之间的逻辑通信&#xff08;即端到端的通信&#xff09;。与网络层的区别是&#xff1a;网络层提供的是主机之间的逻辑通信。 1.1.2 复用和分用 传输层要还要对收到的报文进行…...

山东大学软件学院项目实训-创新实训-基于大模型的旅游平台(二十七)- 微服务(7)

11.1 : 同步调用的问题 11.2 异步通讯的优缺点 11.3 MQ MQ就是事件驱动架构中的Broker 安装MQ docker run \-e RABBITMQ_DEFAULT_USERxxxx \-e RABBITMQ_DEFAULT_PASSxxxxx \--name mq \--hostname mq1 \-p 15672:15672 \-p 5672:5672 \-d \rabbitmq:3-management 浏览器访问1…...

Java Web应用,IPv6问题解决

在Java Web程序中&#xff0c;如果使用Tomcat并遇到了IPv6相关的问题&#xff0c;可以通过以下几种方式来解决&#xff1a; 1. 配置Tomcat以使用IPv4 默认情况下&#xff0c;Java可能会优先使用IPv6。如果你希望Tomcat使用IPv4&#xff0c;最简单的方法是通过设置系统属性来强…...

MyBatis二级缓存开启条件

MyBatis缓存为俩层体系。分为一级缓存和二级缓存。 一级缓存&#xff1a; 一级缓存默认开启&#xff0c;一级缓存的作用域是SqlSession级别的&#xff0c;这意味着当你更换SqlSession之后就不能再利用原来的SqlSession的一级缓存了。不同的SqlSession之间的一级缓存是隔离的。…...

golang 不用sleep如何实现实现每隔指定时间执行一次for循环?

今天介绍的是在go语言里面不用time.Sleep&#xff0c; 使用for range 定时器管道 来实现按照我们指定的时间间隔来执行for循环, 即&#xff1a; for range ticker.C { } 这样就实现了for每隔指定时间执行一次&#xff0c;除非管道被关闭&#xff0c;否则for而且会一直柱塞当前线…...

【el-tooltips改造】Vue实现文本溢出才显示el-tooltip,否则不显示el-tooltips

实现原理&#xff1a; 使用disabled属性控制el-tooltip的content显示与隐藏&#xff1b; 目标&#xff1a; 1行省略、多行省略、可缩放页面内的文本省略都有效。 实现方式&#xff1a; 1、自定义全局指令&#xff0c;tooltipAutoShow.js代码如下&#xff08;参考的el-table中的…...

【Python数据类型的奥秘】:构建程序基石,驾驭信息之海

文章目录 &#x1f680;Python数据类型&#x1f308;1. 基本概念⭐2. 转化&#x1f44a;3. 数值运算&#x1f4a5;4. 数值运算扩展(math库常用函数) &#x1f680;Python数据类型 &#x1f308;1. 基本概念 整数&#xff08;int&#xff09;&#xff1a;整数是没有小数部分的数…...

vue使用html2canvas截图下载时,存在svg或者img或者特殊字体时截图不全的解决办法

使用html2canvas进行div截图时&#xff0c;存在svg和img的解决办法 写在前面&#xff1a;vue使用html2canvas截图时&#xff0c;存在svg或者img或者特殊字体时截图时空白&#xff0c;或者不全解决办法如下第一步&#xff0c;svg或者img先转base64&#xff08;如果是特殊字体&am…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...