做seo营销网站/长沙seo公司排名
目录
一.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…...

【Python】数据可视化之点线图
目录 散点图 气泡图 时序图 关系图 散点图 Scatterplot(散点图)是一种用于展示两个变量之间关系的图表类型。在散点图中,每个观测值(或数据点)都被表示为一个点,其中横轴(…...

jupyter使用pytorch
1、激活环境 以下所有命令都在Anaconda Prompt中操作。 conda activate 环境名称我的环境名称是myenv 如果不知道自己的pytorch配在哪个环境,就用下面方法挨个试。 2、安装jupyter 1、安装 pip install jupyter2、如果已经安装,检查jupyter是否已…...

Electron 安装以及搭建一个工程
安装Node.js 在使用Electron进行开发之前,需要安装 Node.js。 官方建议使用最新的LTS版本。 检查 Node.js 是否正确安装: # 查看node版本 node -v # 查看npm版本 npm -v注意 开发者需要在开发环境安装 Node.js 才能编写 Electron 项目,但是…...

羽毛类型检测系统源码分享
羽毛类型检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…...

Xiaojie雷达之路---doa估计(dbf、capon、music算法)
Hello,大家好,我是Xiaojie,欢迎大家能够和Xiaojie来一起学习毫米波雷达知识,本篇文章主要是介绍一下雷达信号处理中的dbf、capon、music测角算法,一起来看看吧!!! 前言 本文从信号模型、dbf原理、capon原理、music原理以及代码仿真进行展开描述。 信号模型 阵列接收到…...

十大排序算法总结
完整文档见 排序算法总结——语雀文档 比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此也称为非线性时间比较类排序。 非比较类排序:不通过比较来决定元素间的相对次序,它可以突破…...

大厂AI必备数据结构与算法——链表(三)详细文档
冲冲冲!开干 神马!神马!神马,一向让我们学习起来抓耳挠腮的数据结构课程竟然也有教程?还那么详细??真的假的? 那么好,胡广告诉你是假的,哈哈哈哈哈哈哈哈哈…...

一键自动化配置OpenHarmony编译环境
一、概述 本工程旨在对Ubuntu一键初始化配置环境,解决OpenHarmony的编译依赖问题,基于本脚本配置后配合一键下载OpenHarmony代码便能轻松掌控OpenHarmony的下载、编译。 当前建议使用稳定分支Itopen-2.0-Release,该分支是经过多次测试OK的&…...

不同领域的常见 OOD(Out-of-Distribution)数据集例子
以下是几个来自不同领域的常见 OOD(Out-of-Distribution)数据集例子,这些数据集常用于测试和研究模型在分布变化或分布外数据上的泛化能力: 1. 计算机视觉领域 CIFAR-10 vs. CIFAR-10-C / CIFAR-100-C: 描述:CIFAR-10…...

gRPC协议简介
gRPC 是谷歌开源的一套 RPC 协议框架。主要做两件事情:一是数据编码,二是请求映射。 数据编码 数据编码顾名思义就是在将请求的内存对像转化成可以传输的字节流发给服务端,并将收到的字节流再转化成内存对像。方法有很多,常见的…...