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

Vue3 shallowRef 和 shallowReactive

一、shallowRef

使用shallowRef之前需要进行引入:

import { shallowRef } from 'vue';

使用方法和ref 的使用方法一致,以下是二者的区别: 

1. 如果ref 和 shallowRef 都传入的是普通数据类型的数据,那么他们的效果是一样的,数据都能实现响应式。

2. 如果ref 和 shallowRef 传入的是对象数据类型的数据,那么ref 中的数据能够实现响应式,而shallowRef 中的数据无法实现响应。

因为很简单,如果ref中传入的是对象数据类型的数据,那么就会调用reactive 形成拥有对象响应式的Proxy 对象。

而shallowRef 并不会调用reactive,只是一般的数据。

 

二、shallowReactive

使用shallowReactive之前需要进行引入:

import { shallowReactive } from 'vue';

使用方法和ref 的使用方法一致,以下是二者的区别: 

shallowReactive 没有深度监视,而ref 自带深度监视。

也就是说在下面的代码中,person 和shallowPerson 中的name属性都能有响应式,而person.job.type 拥有响应式,shallowPerson.job.type 没有响应式。

setup() {let person = reactive({name: "张三",job: {type: "前端",},});let shallowPerson = shallowReactive({name: "张三",job: {type: "前端",},});return {person,shallowPerson,};
},

相关文章:

Vue3 shallowRef 和 shallowReactive

一、shallowRef 使用shallowRef之前需要进行引入: import { shallowRef } from vue; 使用方法和ref 的使用方法一致,以下是二者的区别: 1. 如果ref 和 shallowRef 都传入的是普通数据类型的数据,那么他们的效果是一样的&#x…...

Python数据分析实战① Python实现数据可视化

文章目录 一、数据可视化介绍二、matplotlib和pandas画图1.matplotlib简介和简单使用2.matplotlib常见作图类型3.使用pandas画图4.pandas中绘图与matplotlib结合使用 三、订单数据分析展示四、Titanic灾难数据分析显示 一、数据可视化介绍 数据可视化是指将数据放在可视环境中…...

ASP.NET 开发几个知识点

1、 皮肤设定&#xff1a; 项目右键&#xff0c;建立皮肤 app_themes 文件夹&#xff0c;右键 建立 web from 皮肤文件&#xff0c; 设定皮肤样式。全局使用皮肤 web.config 增加 <pages styleSheetTheme"Skin1" /> &#xff0c;或在 具体页面 头 增加 sty…...

企业微信H5开发遇到的坑

企业微信官方推荐wx.agentConfig引用<script src"https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>是没有效果的 必须引用以下代码才有效果&#xff0c;这也是我看了社区的回答才有所收获&#xff0c;是一个坑 且VUE引用在线的…...

mysql使用--分组查询

1.分组数据 _1.复杂的数据统计 如&#xff1a;SELECT AVG(score) FROM student_score WHERE subject ‘Mysql是怎样运行的’; 上述实现查询指定课程的平均成绩。对FROM得到的结果集1&#xff0c;通过WHER进一步过滤得到结果集2。对结果集2中每一行执行汇总计算。 _2.创建分组 …...

Android网络模块基本实现步骤

Android网络模块主要是用于访问网络和获取数据&#xff0c;下面是网络模块的基本实现步骤&#xff1a; 选择网络框架&#xff1a;Android中常用的网络框架有HttpURLConnection、OkHttp、Volley和Retrofit等。最新的版本已经支持使用Kotlin协程完成网络请求&#xff0c;可以根据…...

Rust6.2 An I/O Project: Building a Command Line Program (mini_grep)

Rust学习笔记 Rust编程语言入门教程课程笔记 参考教材: The Rust Programming Language (by Steve Klabnik and Carol Nichols, with contributions from the Rust Community) Lecture 12: An I/O Project: Building a Command Line Program project: minigrep src/main.r…...

云轴科技ZStack信创云平台支撑长江航务管理局35套航运管理系统

信创是数字中国建设的重要组成部分&#xff0c;也是数字经济发展的关键推动力量。作为云基础软件企业&#xff0c;云轴科技ZStack产品矩阵全面覆盖数据中心云基础设施&#xff0c;ZStack信创云首批通过可信云《一云多芯IaaS平台能力要求》先进级&#xff0c;是其中唯一兼容四种…...

Canal+Kafka实现MySQL与Redis数据同步(一)

CanalKafka实现MySQL与Redis数据同步&#xff08;一&#xff09; 前言 在很多业务情况下&#xff0c;我们都会在系统中加入redis缓存做查询优化。 如果数据库数据发生更新&#xff0c;这时候就需要在业务代码中写一段同步更新redis的代码。 这种数据同步的代码跟业务代码糅合…...

集合的运算

集合的运算 #include <stdio.h> #include <stdlib.h> void print(int size, char arr[]) {if (size 0) {printf("null");}for (int i 0; i < size; i) {printf("%c", arr[i]);}printf("\n"); } int main() {char U[] { a,b,c,…...

在MySQL上实现间隔5分钟汇总取数及相关字符串、时间处理方法实践

1. 实践案例需求描述 查询mysql数据库&#xff0c;按每5分钟分组获取3个小时内的电量数据&#xff0c;参考SQL语句如下。 select sd.RecordTime RecordTime, sd.sddl sddl,sd.pvdl ,cap.capdl capdl from ((SELECT CONCAT(DATE_FORMAT(RecordTime,%Y-%m-%d %H:), LPAD(floor(…...

什么是AIGC

1 定义 "AIGC"代表“人工智能生成内容”&#xff08;Artificial Intelligence Generated Content&#xff09;&#xff0c;它指的是使用人工智能&#xff08;AI&#xff09;技术自动生成的内容&#xff0c;这些内容可以包括文本、图像、音乐、视频或其他多媒体形式。…...

〖大前端 - 基础入门三大核心之JS篇㊳〗- DOM访问元素节点

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…...

GitHub Universe 2023:AI 技术引领软件开发创新浪潮

GitHub 是全球领先的软件开发和协作平台&#xff0c;数百万开发者和企业在此分享、学习和创建卓越的软件。同时 GitHub 处在 AI 技术前沿&#xff0c;通过其先进的 AI 技术增强开发者体验并赋能未来软件开发的使命。在今天的文章中&#xff0c;我们将一起看看在 GitHub 年度大会…...

数据结构:红黑树的插入实现(C++)

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》《Linux》 文章目录 一、红黑树二、红黑树的插入三、代码实现总结 一、红黑树 红黑树的概念&#xff1a; 红黑树是一颗二叉搜索树&#xff0c;但在每个节点上增加一个存储位表示节点的颜色&…...

飞天使-django之数据库简介

文章目录 增删改查解决数据库不能存储中文问题创建表数据类型表的基本操作主键唯一键 unique外键实战 增删改查 四个常用的语句查询 : insert delete update select insert into student(Sno,name) values(95001,"张三") delete from student where name张三 upda…...

Flink之KeyedState

前面的文章中介绍过Operator State,这里介绍一下Keyed State. 在使用Operator State时必须要实现CheckpointFunction接口,而Keyed State则不需要,在使用keyBy(...)分组分组后,调用的函数必须是实现RichFuntion接口的函数才可以使用Keyed State.同样使用Keyed State也必须开启Ch…...

c语言:模拟实现qsort函数

qsort函数的功能&#xff1a; qsort相较于冒泡排序法&#xff0c;不仅效率更快&#xff0c;而且能够比较不同类型的元素&#xff0c;如&#xff1a;浮点数&#xff0c;结构体等等。这里我们来模拟下qsort是如何实现这一功能的&#xff0c;方便我们对指针数组有一个更深层次的理…...

从0开始学习数据结构 C语言实现 1.前篇及二分查找算法

一、前篇 1、什么是数据结构&#xff1f; 数据结构是带有结构特性的数据元素的集合&#xff0c;它研究的是数据的逻辑结构和数据的物理结构以及它们之间的相互关系 2、时间复杂度与空间复杂度 大O符号是用于描述函数渐进行为的数学符号 常用函数的增长表 阶乘O(n!) > 指数…...

VSCode 使用CMakePreset找不到cl.exe编译器的问题

在用vscode开发c项目的时候&#xff0c;使用预先配置的CMakePresets.json可以把一些特定的cmake选项固定下来&#xff0c;在配置时直接使用 "cmake --config --preset presetname"就可以进行配置&#xff0c;免去在命令行输入过多的配置参数。 但是在vscode中&#…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...