Vue3:shallowRef与shallowReactive
目录
一.shallowRef 和 shallowReactive
1.shallowRef
2.shallowReactive
二.ref 和 reactive
1. ref
2. reactive
三.各自使用场景
1.shallowRef
2.shallowReactive
3.ref
4.reactive
四.shallowRef 使用
五.shallowReactive使用
六.效果
一.shallowRef 和 shallowReactive
1.shallowRef
用于创建一个基本类型的响应式引用。它只对该引用本身进行响应式处理,不会深入到引用所指向的对象内部。这意味着如果引用的值是一个对象或数组,那么这个对象或数组内部的变化将不会触发视图更新。
2.shallowReactive
用于创建一个对象的响应式包装。与reactive类似,但它只会使对象的第一层属性变为响应式,而不会递归地使所有嵌套属性变为响应式。这可以减少不必要的性能开销,特别是在处理大型对象时。
二.ref 和 reactive
1. ref
用于创建一个响应式引用,它可以用于任何类型的值(包括对象、数组等)。当引用的值发生变化时,会触发视图的更新。
2. reactive
用于创建一个对象的响应式包装,它会递归地使所有嵌套属性变为响应式。这使得对嵌套属性的任何更改都会触发视图的更新。
三.各自使用场景
1.shallowRef
当你需要创建一个基本类型的响应式引用,并且希望避免深度监听时,可以使用 shallowRef。例如,如果你有一个布尔值或数字作为状态,并且不希望这些值的变化导致整个对象被重新渲染,可以使用 shallowRef。
2.shallowReactive
当你需要创建一个对象的响应式包装,但只关心第一层属性的变化,并且希望减少性能开销时,可以使用 shallowReactive。例如,如果你有一个包含大量嵌套属性的大型对象,但只需要监视顶层属性的变化,可以使用 shallowReactive。
3.ref
当你需要创建一个可以包含任何类型值的响应式引用时,可以使用 ref。例如,如果你有一个复杂的对象或数组作为状态,并且希望对其整体进行响应式处理,可以使用 ref。
4.reactive
当你需要创建一个对象的完全响应式包装,并希望所有嵌套属性的变化都能触发视图更新时,可以使用 reactive。例如,如果你有一个包含多个嵌套属性的对象,并且希望每个属性的变化都能引起视图的更新,可以使用 reactive。
四.shallowRef 使用
求和与修改整个人可成功修改
修改名字无法成功修改

五.shallowReactive使用
修改汽车品牌可成功修改
修改汽车颜色和引擎无法成功修改

六.代码
<template><h2>求和为:{{ sum }}</h2><h2>名字为: {{ person.name }}</h2><h2>年龄为:{{ person.age }}</h2><button @click="ChangeSum">求和加一</button><button @click="ChangeName">修改名字</button><button @click="ChangePerson">修改整个人</button><span></span><h2>汽车品牌: {{ car.brand }}</h2><h2>汽车颜色:{{ car.options.color }}</h2><h2>汽车引擎:{{ car.options.engine }}</h2><button @click="ChangeBrand">修改汽车品牌</button><button @click="ChangeColor">修改汽车颜色</button><button @click="ChangeEngine">修改引擎</button></template><script lang="ts" setup name="App">
import { options } from 'node_modules/axios/index.cjs';
import { ref , reactive, shallowRef , shallowReactive} from 'vue';let car = shallowReactive({brand:'宝马',options:{color:'红色',engine:'V6',}})function ChangeBrand(){car.brand = '奔驰'}function ChangeColor(){car.options.color = '白色'}function ChangeEngine(){car.options.engine = 'V16'}let sum = shallowRef(0)let person = shallowRef({name:'小明',age:18})function ChangeSum(){sum.value += 1}function ChangeName(){person.value.name = '小红'}function ChangePerson(){person.value = {name:'小兰',age:28}}</script><style>
button{width: 150;height: 40;
}</style>
六.效果

相关文章:
Vue3:shallowRef与shallowReactive
目录 一.shallowRef 和 shallowReactive 1.shallowRef 2.shallowReactive 二.ref 和 reactive 1. ref 2. reactive 三.各自使用场景 1.shallowRef 2.shallowReactive 3.ref 4.reactive 四.shallowRef 使用 五.shallowReactive使用 六.效果 一.shallowRef 和 shal…...
django开发流程3(轮播图)
1.在models中创建一个模板 class Ads(models.Model):title models.CharField(verbose_name"标题", max_length30)image models.ImageField(verbose_name"广告图", upload_to"ads")url models.URLField(verbose_name"链接网址", de…...
MySQL的增删查改(基础)一
一.增 方式1(简写插入): 语法:insert into 表名 values(值,值,值……); 这里insert into 代表要插入一条新数据行,values后面就是该行的值,其中后面的值的…...
深度学习(入门)03:监督学习
1、监督学习简介 监督学习(Supervised Learning)是一种重要的机器学习方法,它的目标是通过“已知输入特征”来预测对应的标签。在监督学习中,每一个“特征-标签”对被称为样本(example),这些样…...
Django——admin创建和使用
1. Django Admin简介 Django Admin是Django框架自带的一个管理后台工具,它允许开发者通过一个直观的Web界面轻松地管理应用中的数据模型。Admin提供了模型的CRUD(Create,Read, Update, Delete)操作,以及数据的批量处理和搜索功能…...
鸿蒙开发(NEXT/API 12)【硬件(取消注册智慧出行连接状态的监听)】车载系统
取消注册智慧出行连接状态的监听。 接口说明 接口名描述[off] (type: ‘smartMobilityStatus’, smartMobilityTypes: SmartMobilityType[], callback?: Callback): void取消注册智慧出行连接状态的监听。 开发步骤** 导入Car Kit模块。 import { smartMobilityCommon } fr…...
JVM中的GC流程与对象晋升机制详解
一、垃圾回收的概念 1.1 什么是垃圾回收? 垃圾回收是自动回收不再使用的对象,从而释放内存的一种机制。通过GC,JVM能够动态地管理内存的分配与回收,避免内存泄漏和溢出。 1.2 GC的重要性 内存管理:GC自动处理对象的…...
SQL:如果字段需要排除某个值但又有空值时,不能直接用“<>”或not in
在 SQL 中,如果字段需要排除某个值但又有空值存在时,不能直接使用“<>”(不等于)或 NOT IN,是因为这些操作会把空值也考虑进去,但通常情况下可能并不希望空值被这样处理。 以下是一些解决方法&#…...
运放模块的选型参数
增益带宽积-----尤其重要: GWB 增益*带宽 压摆率: 高带宽的运放一般都是电流型运放: 注意压摆率计算公式里面的Vopp参数是放大后的电压最大值: 参数,布局一定参考数据手册!!!&…...
win10文件共享设置 - 开启局域网文件共享 - “您没有权限访问,请与网络管理员联系请求访问权限”解决方案
实现步骤: 1、在“网络和共享中心”关闭“密码保护的共享” 2、在“启用和关闭windows功能”中开启SMB文件共享支持。 3、在磁盘安全选项中添加“everyone”用户(重点!) 详细操作: https://blog.csdn.net/Skyirm/a…...
Go基础编程 - 16 - 方法
方法 概述1. 方法定义2. 值方法、指针方法3. 方法集合 匿名字段表达式自定义 error 上一篇:延迟调用(defer) 概述 1. 方法定义 func (receiver T) 方法名(参数列表) (返回值列表){}receiver:接收者参数名T…...
接口报错500InvalidPropertyException: Invalid property ‘xxx[256]‘,@InitBinder的使用
org.springframework.beans.InvalidPropertyException: Invalid property ‘xxx[256]’ of bean class [com.xxl.MailHead]: Invalid list index in property path ‘xxx[256]’; nested exception is java.lang.IndexOutOfBoundsException: Index: 256, Size: 256 从报错可以…...
Web 3.0 介绍
Web 3.0 是互联网的下一代发展阶段,通常被称为去中心化的网络。它与目前的 Web 2.0(以社交媒体、云计算和中心化平台为主导)不同,强调用户对数据和内容的更多掌控,依靠区块链、加密货币、去中心化应用(DApp…...
一起搭WPF界面之界面切换绑定
一起搭WPF界面之界面切换绑定 前言界面填充总结 前言 在主界面中定义Grid网格,界面网格化后,可以模块化搭建界面进行填充。 界面填充 总结 提示:这里对文章进行总结: 例如:以上就是今天要讲的内容,本文仅…...
css 数字比汉字要靠上
这个问题通常是由于数字字体的下排的问题造成的,也就是数字的底部边缘位置比汉字的顶部边缘位置更靠下。为了解决这个问题,可以尝试以下几种方法: 使用CSS的vertical-align属性来调整对齐方式。例如,可以将数字的对齐方式设置为to…...
sentinel原理源码分析系列(三)-启动和初始化
本文是sentinel原理源码分析系列第三篇,分析sentinel启动和初始化 启动/初始化 sentinel初始化分两块,静态初始和适配器(包括aop) 静态初始 1. Root EntranceNode 如果我们用一栋楼类比资源调用,root EntranceNode好比一栋楼的大门&…...
计算机网络(九) —— Tcp协议详解
目录 一,关于Tcp协议 二,Tcp报头字段解析 2.0 协议字段图示 2.1 两个老问题 2.2 16位窗口大小 2.3 32位序号和确认序号 2.4 6个标记位 三,Tcp保证可靠性策略 3.1 确认应答机制(核心) 3.2 超时重传机制 3.3 …...
跨境支付专业术语
跨境支付 跨境支付是指支付或者清结算过程发生在两个及以上的国家地区之间、实现了资金跨国跨地区转移的支付行为。 境外本地支付 境外本地支付是指支付和清结算过程同时发生在单个国家或地区境内,资金在本国家或地区内部转移的支付行为。 国际汇款 国际汇款指跨…...
多级目录SQL分层查询
需求:有多级目录,而目录的层级是不固定的,如下图所示: 数据结构: sql语句: <select id"getList" resultType"com.hikvision.idatafusion.dhidata.bean.vo.knowledgebase.KnowledgeBaseT…...
VulnHub-SickOs1.1靶机笔记
SickOs1.1靶机笔记 概述 Vulnhub的靶机sickos1.1 主要练习从互联网上搜取信息的能力,还考察了对代理使用,目录爆破的能力,很不错的靶机 靶机地址: 链接: https://pan.baidu.com/s/1JOTvKbfT-IpcgypcxaCEyQ?pwdytad 提取码: yt…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
MinIO Docker 部署:仅开放一个端口
MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...
Bean 作用域有哪些?如何答出技术深度?
导语: Spring 面试绕不开 Bean 的作用域问题,这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开,结合典型面试题及实战场景,帮你厘清重点,打破模板式回答,…...
windows系统MySQL安装文档
概览:本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容,为学习者提供全面的操作指导。关键要点包括: 解压 :下载完成后解压压缩包,得到MySQL 8.…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构: 传统SMO中LPF会带来相位延迟和幅值衰减,并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF),可以去除高次谐波,并且不用相位补偿就可以获得一个误差较小的转子位…...
