【Vue3】Ref 和 ShallowRef 的区别

目录

  • 什么是 Ref
  • 什么是 ShallowRef
  • 区别对比
  • 示例代码

什么是 Ref

Ref 是 Vue 3 中的一个新的基本响应式数据类型,它允许我们包装任意的 JavaScript 值,并且在数据变化时发出通知。Ref 提供了一个 .value 属性来访问其内部的值,同时还提供了一些额外的 API 来处理数据。Ref 可以被用于跟踪单个值的变化,并在需要时自动触发重新渲染。

什么是 ShallowRef

ShallowRef 与 Ref 类似,它也是用来包装值并监听变化的。但是,与 Ref 不同的是,ShallowRef 会对其包装的值进行浅层的响应式转换。这意味着,当包装对象发生变化时,只有对象的第一层属性会触发响应式更新,而不会深层遍历对象。

区别对比

  1. 深度响应式转换: Ref 对包装的值进行深度响应式转换,而 ShallowRef 则只进行浅层响应式转换。
  2. 性能影响: 由于 ShallowRef 只对第一层属性进行响应式转换,因此在处理大型对象时可能会比 Ref 更具性能优势。
  3. 应用场景: Ref 适用于需要对整个对象进行深度响应式转换的场景,而 ShallowRef 则适用于只需要关注对象的第一层属性变化的场景。

示例代码

import { ref, shallowRef } from 'vue';// Ref 示例
const count = ref(0);
count.value++; // 触发重新渲染// ShallowRef 示例
const obj = { count: 0 };
const shallowObj = shallowRef(obj);
shallowObj.value.count++; // 仅触发第一层属性的更新

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

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

相关文章

【前端捉鬼记】记录两个js中非常基础的小白问题

写逻辑时,遇到两个js代码里非常基础的小白问题,用简单的代码测试并记录一下: 1、一个对象 a 有个数组类型的属性 b,将这个数组取出保存到另一个变量 m,修改 m,对象 a 中的属性 b 是否跟随变化?…

【Java EE初阶二十七】深入了解cookie

1. 简单了解cookie Cookie是http请求里header 中的一个属性,浏览器持久化存储数据的一种机制,网页无法访问主机的文件系统,要想存储数据就得通过其他的方式; 且cookie中保存的数据也是键值对的形式,最终还是要把这个键…

移动开发:网格视图

一、在新建GridView模块下添加图片以及创建cell.xml文件 1.粘贴图片时选择红框中的路径,点击“OK” 2.在路径后添加-mdpi后缀,再点击“OK” 二、相关代码块 1.MainActivity.java文件代码 package com.example.gridview;import androidx.appcompat.app.AppCompatAc…

供应链优化:降本增效的核心战略——张驰咨询

在当今这个高度竞争的商业环境中,企业为了保持竞争力,不断寻求降低成本和提升效率的策略变得至关重要。有效的成本控制和效率提升不仅能够增加企业的利润率,还能增强其市场地位和客户满意度。以下是一些实用的策略,旨在帮助企业实…

HCIE之MPLS练习(六)

MPLS练习 一、静态LSP1、IGP构建FEC2、全网运行MPLS3、打通LSP通道3.1、静态LSP配置3.2、转发过程3.3、验证标签转发过程 4、利用LSP传递任意流量4.1、配置4.2、验证 二、LDP协议1、IGP构建FEC2、全网运行mpls、ldp3、mpls ldp邻居关系、LIB表4、转发过程5、验证mpls转发过程6、…

从嵌入式Linux到嵌入式Android

最近开始投入Android的怀抱。说来惭愧,08年就听说这东西,当时也有同事投入去看,因为恶心Java,始终对这玩意无感,没想到现在不会这个嵌入式都快要没法搞了。为了不中年失业,所以只能回过头又来学。 首先还是…

leetcode——异或运算—— 只出现一次的数字

给你一个 非空 整数数组 nums ,除了某个元素只出现一次以外,其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题,且该算法只使用常量额外空间。 示例 1 : 输入&#xff…

Python(NetOps)前传-网络设备开局配置

背景 我们知道用Python在cli配置网络设备的前提是: 网络设备与Python主机网络可达网络设备已开启并完成ssh相关配置 目标 本文已华为S5720S-52P-LI-AC交换机为例,完成: 完成网络设备开局配置;用Python脚本验证ssh登录 配置 …

深入理解nginx负载均衡round-robin算法

目录 1. 概述2. 如何启用round-robin算法3. 初始化round-robin算法3.1 设置算法上下文环境初始化回调函数3.2 加载服务器列表4. 初始化负载均衡请求上下文5. 获取peer6. 释放peer1. 概述 nginx为我们提供了强大的HTTP代理功能,而负载均衡算法是实现后端多Real Server代理的一个…

系统认识数据分析

数据分析的全貌 包括应用、观测和实验 观测 分为两部分观察和测量 观察 采集数据: 解析系统日志 : 产生日志、解析日志、得到数据 埋点获取新数据 :日志记录新信息、解析日志、得到新数据 通过传感器收集:例如天气数据收集 爬虫&…

uniapp——信号值组件(vue3)

组件代码 <template><view><view class"signals"><view v-for"(item, index) in signals" :key"index" class"signal" :style"item"></view></view></view> </template>&…

ros2+nav2中常用的概念

一.sdf文件 Simulation Description File&#xff0c;描述Gazebo中机器人模型的文件&#xff0c;一般在models文件夹下。该文件描述了组成机器人的物理属性、关节、碰撞对象、视觉效果和插件的集合。 Links: 链接包含模型的一个实体的物理属性。 这可以是一个轮子&#xff0c…

Android工程师必备知识,2024Android面试

前言 职场的金九银十跳槽季火热进行中&#xff0c;不同的是&#xff0c;今年的竞争比往年会更加激烈一些&#xff0c;形式更加严峻一些。 对于求职者来说&#xff0c;面试是一道坎&#xff0c;很多人会恐惧面试&#xff0c;即使是工作很多年的老鸟&#xff0c;也可能存在面试…

STM32控制气泵和电磁阀实现

一、功能简介 使用STM32控制气泵和电磁阀的开和关&#xff0c;气泵和电磁阀的供电电压为12V。 二、实现过程 1、气泵和电磁阀的开和关均为开关量&#xff0c;实现控制方法有多种&#xff0c;比如继电器&#xff0c;但是继电器动作有噪声且体积较大&#xff0c;更好的方法为使…

Sqli-labs靶场第19关详解[Sqli-labs-less-19]自动化注入-SQLmap工具注入

Sqli-labs-Less-19 通过测试发现&#xff0c;在登录界面没有注入点&#xff0c;通过已知账号密码admin&#xff0c;admin进行登录发现&#xff1a; 返回了Referer &#xff0c;设想如果在Referer 尝试加上注入语句&#xff08;报错注入&#xff09;&#xff0c;测试是否会执行…

论文阅读笔记 | Limited-Reference Image Quality Assessment: Paradigms and Discussions

文章目录 文章题目发表年限期刊/会议名称动机主要思想或方法架构实验结果 文章链接&#xff1a;https://dl.acm.org/doi/10.1145/3581783.3613436 文章题目 Limited-Reference Image Quality Assessment: Paradigms and Discussions 发表年限 2023 期刊/会议名称 MM’23: …

Promise状态变化

promise共有三种状态&#xff1a;pending&#xff08;待定中&#xff09;| resolved&#xff08;已完成&#xff09;| rejected&#xff08;已拒绝&#xff09;。 其状态变化过程有两种&#xff1a;pending >>> resolved 或 pending >>> rejected. 状态变化…

1688商品详情数据(商品属性,价格,sku等)1688API接口开发系列

1688&#xff08;阿里巴巴批发网&#xff09;提供了API接口供开发者使用&#xff0c;以便能够获取商品详情数据&#xff0c;包括商品属性、价格、SKU等信息。在使用1688的API接口之前&#xff0c;你需要完成以下几个步骤&#xff1a; 请求文档&#xff0c;API接口接入Anzexi58…

java网络编程 01 IP,端口,域名,TCP/UDP, InetAddress

01.IP 要想让网络中的计算机能够互相通信&#xff0c;必须为计算机指定一个标识号&#xff0c;通过这个标识号来指定要接受数据的计算机和识别发送的计算机&#xff0c;而IP地址就是这个标识号&#xff0c;也就是设备的标识。 ip地址组成&#xff1a; ip地址分类&#xff1a;…

Jacob使用教程--通过宏来寻找变量名

说明: 这里做个随比,参考资料请见前面的系列文章 问题展示: 对于一个操作,当我们不知道怎么利用jacob写代码时,而且网上也找不到,可以按照如下操作: 比如,我们要删除 word中的文本框 我们根本不知道文本框,这个变量叫什么,在Microsoft文档哪个父目录下面, 可以通过…