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

`shallowReactive` 与 `shallowRef`：浅层响应式 API

news 来源：原创 2025/6/27 1:17:07

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

在 Vue3 中，shallowReactive 和 shallowRef 是两种特殊的响应式 API，它们提供了一种浅层响应式的方式来处理对象和引用类型的数据。

`shallowReactive`

shallowReactive 创建一个浅层响应式对象。这意味着只有对象的顶层属性是响应式的，嵌套的对象属性不会被转换为响应式。

使用 `shallowReactive`

import { shallowReactive } from 'vue';const state = shallowReactive({
foo: 1,
bar: {
baz: 2
}
});// 改变顶层属性会触发更新
state.foo++; // 响应式// 改变嵌套属性不会触发更新
state.bar.baz++; // 非响应式

`shallowRef`

shallowRef 创建一个浅层响应式的引用。与普通的 ref 不同，shallowRef 只有在引用的值本身改变时才会触发更新，如果引用的对象内部的属性发生变化，不会触发更新。

使用 `shallowRef`

import { shallowRef } from 'vue';const state = shallowRef({
foo: 1,
bar: {
baz: 2
}
});// 改变引用的值会触发更新
state.value = { foo: 2 }; // 响应式// 改变引用对象的属性不会触发更新
state.value.bar.baz++; // 非响应式

适用场景

shallowReactive 和 shallowRef 适用于以下场景：

当你有一个大型数据结构，并且只想对顶层属性进行响应式处理时。
当你知道嵌套对象不会改变，或者你不关心嵌套对象内部的变化时。
当你需要优化性能，并且可以接受一定程度的非响应式行为时。

总结

shallowReactive 和 shallowRef 提供了浅层响应式的行为，只有顶层属性或引用本身的改变才会触发更新。
这两种 API 在处理大型数据结构或优化性能时非常有用。
使用它们时需要注意，嵌套对象的内部变化不会触发视图更新。

`shallowReactive` 与 `shallowRef`：浅层响应式 API

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…...

编程日记 2025/6/27 1:17:07

使用Node.js开发服务端接口

Node.js是一个基于JavaScript的运行时环境，非常适合开发高性能的服务端接口。以下是开发服务端接口的主要方法和步骤。选择合适的框架 Express、Koa或Fastify是Node.js中常用的框架。Express是最流行的选择，适合快速开发。Koa更轻量，适合需…...

编程日记 2025/6/25 5:35:38

`teleport` 传送 API 的使用：在 Vue 3 中的最佳实践

编程日记 2025/6/27 4:39:54

Linux 多种方式实现行转列

目录一. 前提二. xargs 实现行转列三. paste 实现行转列四. sed 实现行转列一. 前提 ⏹之前在这下面篇文章中使用sed命令实现了行专列，本篇文章再介绍几种更加简单的方式。 Linux sed案例 👉 20231126-2.log 110120 SPLREQUEST 内容1 AAA memberID1…...

编程日记 2025/6/26 22:00:10

AI与SEO关键词协同进化

内容概要人工智能（AI）与搜索引擎优化（SEO）的结合，正深刻变革着关键词策略的制定与执行方式。本文旨在探讨AI技术如何驱动SEO关键词领域的智能化进化，核心在于利用AI强大的数据处理与模式识别能力&#xf…...

编程日记 2025/6/25 5:32:10

C# 网络编程-关于HTTP/HTTPS的基础（一）

一、HTTP基础概念 1. 请求-响应模型 HTTP是基于客户端-服务器的无状态协议，流程如下： 客户端（如浏览器）发起请求。服务器接收请求并处理。服务器返回响应，包含状态码、Header和响应体。连接关闭，后续请求…...

编程日记 2025/6/26 21:13:36

题解：P11501 [ROIR 2019] 探险队(Day 2)

前言：这道题 dp 做法找环的部分还没有用拓扑做的，补充一下。这道题其实很像“上司的舞会”，就是求树上最大独立集。这里我们把每个人向他讨厌的那个人连边（发现所有点出度均为 1 1 1，所以这是一个基环树&#xff0…...

编程日记 2025/6/25 5:31:09

读者写者问题与读写锁自旋锁

一、读者写者问题读者写者问题具有以下特点： 一个交易场所---写者写入数据，读者读数据两种角色---读者，写者三种关系读者和读者---并发写者和写者---互斥读者和写者---互斥 && 同步二、读者写者VS生产消费生产者消费者模型中…...

编程日记 2025/6/25 5:29:38

Sublime text启用vim

打开：首选项 > 设置，在打开的输入框中把 "ignored_packages": ["Vintage"] 修改为 "ignored_packages": []，不忽略Vintage，即为启用Vintage，它是Sublime的内置vim插件。然后再添加&…...

编程日记 2025/6/25 5:31:38

蚂蚁百宝箱快速创建智能体AI小程序

蚂蚁百宝箱官网https://tbox.alipay.com/community?operationSource1006/ 以下是一篇关于蚂蚁百宝箱快速创建智能体 AI 小程序的图文并茂的博客： 标题：蚂蚁百宝箱快速创建智能体 AI 小程序，开启智能应用新体验引言在数字化飞速发展的当…...

编程日记 2025/6/25 5:29:38

【Anconda安装教程】安装到环境配置全流程

目录前言一、进入官网下载二、下载Anconda编辑三、安装Anconda 四、配置环境变量五、验证是否安装成功六、anaconda的使用情况一：电脑现在没有装python或者现在装的可以卸载掉情况二：电脑目前装了python，但想保留它 6.1 进…...

编程日记 2025/6/25 5:30:38

Linux系统编程 | IPC对象---信号量

在前面两篇博客文章中，对Linux系统编程部分IPC三大对象中的消息队列和共享内存的知识体系做了一个大致的梳理，在本篇文章中，将对三大IPC对象中的最后一个信号量做一个总结。如果有需要的博客朋友，可以参考我的Linux系统编程专栏参…...

编程日记 2025/6/27 4:41:02

当数据自己会说话：聚类与分类算法全景解析

从金融风控到医疗诊断，两种机器学习技术如何重塑决策逻辑在人工智能与数据驱动的时代，聚类和分类作为机器学习的两大核心技术，已成为从海量数据中提取价值的必备工具。它们看似相似——都是将数据划分到不同的组中——但内在逻辑和应用场景却…...

编程日记 2025/6/25 5:32:38

哈佛结构（Harvard Architecture）与冯·诺依曼架构（Von Neumann Architecture）

一、基础概念与历史溯源哈佛结构起源：1940年代由哈佛大学开发的Mark I计算机首次采用，专为弹道计算优化。核心特征： 物理分离的存储器：程序指令存储在ROM/Flash，数据存储在RAM，两者独立编址。独立总线系统…...

编程日记 2025/6/25 5:35:38

Python内存使用分析工具深度解析与实践指南（下篇）

文章目录引言6. guppy3 / Heapy功能安装程序示例适用场景注意事项 7. objgraph功能安装程序示例适用场景注意事项 8. memory_profiler功能安装程序示例适用场景注意事项 9. profile（标准库）功能程序示例适用场景注意事项总结对比表引言在Python编程…...

编程日记 2025/6/25 5:31:08

经典控制理论：线性化笔记

一、弹簧阻尼系统求B点的位置X0，与弹簧形变后的位置X1的关系 ---- 解： 二、直流电动机模型求输出转速与输入电压的关系解：...

编程日记 2025/6/25 5:31:09

【StarRocks系列】查询优化

步骤参考官网分析查询 | StarRocks StarRocks-Profile分析及优化指南 StarRocks-Profile分析及优化指南 - 经验教程 - StarRocks中文社区论坛...

编程日记 2025/6/25 5:32:09

【STM32】STM32的中断系统寄存器NVIC、EXTI

文章目录中断概述中断的概念为什么需要中断STM32的中断 STM32的中断体系架构NVICNVIC的介绍中断优先级优先级寄存器优先级组 EXTI 中断概述中断的概念在主程序运行过程中，出现了特定事件，使得CPU暂停当前正在运行的程序，转而去处理这个事…...

编程日记 2025/6/25 5:31:40

一、核心交互链路架构 #mermaid-svg-ZBqCSQk1PPDkIXNx {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ZBqCSQk1PPDkIXNx .error-icon{fill:#552222;}#mermaid-svg-ZBqCSQk1PPDkIXNx .error-text{fill:#552222;strok…...

编程日记 2025/6/25 5:30:39

税务 VR 虚拟体验，带来全新办税感受

在过去，企业办税难题诸多。申报纳税高峰期，办税服务厅人满为患，财务人员需早起取号排队，耗费大量时间。传统办税流程复杂，涉及多环节和部门，资料繁多，若准备不全或有误就得重新准备，…...

编程日记 2025/6/25 5:31:38

【Linux 驱动中断】

Linux 驱动中断一、GIC 控制器：硬件中断的枢纽二、GPIO 中断：设备交互的常见入口三、Tasklet 与软中断：高效的异步处理机制3.1 Tasklet3.2 软中断四、工作队列：灵活的任务处理框架4.1 共享工作队列4.2 自定义工作队列4.3 延迟工…...

编程日记 2025/6/25 5:32:08

ali 轻量服务器安装nginx

# Ubuntu sudo apt install nginx-light # 精简版 # CentOS sudo yum install nginx #启动并设置开机自启 sudo systemctl daemon-reload sudo systemctl start nginx sudo systemctl enable nginx #验证安装 nginx -v curl -I 127.0.0.1 #常用命令： # 重新加载配…...

编程日记 2025/6/25 5:32:11

2025年- H83-Lc191--139.单词拆分(动态规划）--Java版

1.题目描述 2.思路字符串s是一个容器（一个背包），wordDict词典是物品，这里面的每个物品我们可以使用多次。动归五部曲 （1）字符串的长度为i，dp[i]true。 dp[s.size] dp[0]代表空字符串 &#x…...

编程日记 2025/6/25 5:30:08

【好用但慎用】Windows 系统中将所有 WSL 发行版从 C 盘迁移到非系统盘的完整笔记（附异常处理）

🚀 将所有 WSL 发行版从 C 盘迁移到 I 盘的完整教程（含 Podman / NVIDIA Workbench / Ubuntu 等） 【无标题】使用 Chocolatey 安装 WSL 管理工具 LxRunOffline-CSDN博客免责声明重要提示在执行 WSL 迁移操作前，请务必仔细阅读…...

编程日记 2025/6/25 5:32:39

贪心算法思路详解

文章目录一、贪心算法是什么？二、贪心算法原理三、再谈背包问题四、活动选择问题五、拟阵理论总结一、贪心算法是什么？ 贪心算法与动态规划算法一样是用于求解最优化类问题的算法，其本质上是基于动态规划算法的改进算法，其所求…...

编程日记 2025/6/25 5:32:38

Keil 安装 CMSIS-FreeRTOS 失败解决方案

一、问题现象在 Keil 中安装 CMSIS-FreeRTOS 时出现以下错误： （1） 通过内置工具安装： （2）通过官网安装： 二、核心原因 Keil 版本过低，与 CMSIS-FreeRTOS 包不兼容： …...

编程日记 2025/6/25 5:35:08

Python打卡DAY33

DAY33：MLP神经网络的训练恩师浙大疏锦行知识点： PyTorch和cuda的安装查看显卡信息的命令行命令（cmd中使用）cuda的检查简单神经网络的流程数据预处理（归一化、转换成张量）模型的定义继承nn.Module类定义…...

编程日记 2025/6/25 5:35:08

RJ45 网口实现千兆传输速率（1Gbps）的原理，涉及物理层传输技术、线缆标准、信号调制及网络协议等多方面的协同设计。以下从技术维度展开详细解析：

一、千兆以太网的标准与物理层基础 1. 标准规范千兆以太网遵循 IEEE 802.3ab（针对双绞线）和 IEEE 802.3z（针对光纤）标准，其中 RJ45 接口对应双绞线场景，核心是通过四对双绞线（CAT5e/CAT6 线缆…...

编程日记 2025/6/26 11:00:03

leetcode hot 100之：二叉树的层序遍历

层序遍历和前中后序遍历不一样，大家可以想象的是：前中后序遍历可以用递归，因为他是以子树为标准来选择的；那层序怎么办呢？怎么才能一层层地遍历呢？ void First(TreeNode* root) {printf("%d",ro…...

编程日记 2025/6/25 5:32:38

深入解析BERT：语言分类任务的革命性引擎

“BERT的出现，如同在自然语言处理领域投下了一颗认知炸弹——它让机器真正学会了’联系上下文’。” ——自然语言处理研究者普遍共识在自然语言处理（NLP）领域，2018年诞生的BERT（Bidirectional Encoder Representatio…...

编程日记 2025/6/25 5:32:11

Pycharm中Jupyter Notebook 插件常用快捷键

bg：Jupyter跟LINQPad很像，都是方便写的时候看数据用快捷键功能Shift Enter执行当前单元格，并跳转到下一个单元格Ctrl Enter执行当前单元格，不跳转（留在当前单元格）Alt Enter执行当前单元格&#xff0c…...

编程日记 2025/6/25 5:32:09

【Python】Excel表格操作：ISBN转条形码

一、效果原始文件： 输出文件： 二、代码 import os import logging from openpyxl import load_workbook from openpyxl.drawing.image import Image as ExcelImage from barcode import EAN13 from barcode.writer import ImageWriterlogging.basicCo…...

编程日记 2025/6/25 5:31:08

大数据Hadoop集群搭建

文章目录大数据Hadoop集群搭建一、VMware准备Linux虚拟机二、VMware虚拟机系统设置1、主机名、IP、SSH免密登录2、JDK环境部署3、防火墙、SELinux、时间同步三、VMware虚拟机集群上部署HDFS集群1、集群规划2、上传&解压3、Hadoop安装包目录结构4、修改配置文件&#xff0…...

编程日记 2025/6/25 5:32:39

饼图：数据可视化的“切蛋糕”艺术

饼图，作为数据可视化家族中最经典、最易识别的成员之一，其核心功能如同其名——像切分蛋糕一样，直观展示一个整体（100%）被划分为若干组成部分的比例关系。往期文章推荐: 20.用Mermaid代码画ER图：AI时代的…...

编程日记 2025/6/25 5:31:38

mysql server层做了什么

服务器处理客户端请求服务器程序在处理来自客户端的查询请求时，大致需要分为3部分：连接管理、解析与优化、存储引擎。连接管理每当有一个客户端进程连接到服务器进程时，服务器进程都会创建一个线程专门处理与这个客户端的交互&#xff…...

编程日记 2025/6/25 5:32:39

3.5.1_1 信道划分介质访问控制（上）

在这个视频中我们要介绍信道划分、介质访问控制，这是两个词，我们先介绍一下什么叫做介质访问控制。通过之前的学习，我们知道在计算机网络当中，有的信道它在逻辑上属于总线型，我们也可以把这种信道称为广播信道&#x…...

编程日记 2025/6/25 21:54:50

RPC常见问题回答

项目流程和架构设计 1.服务端的功能： 1.提供rpc调用对应的函数 2.完成服务注册服务发现上线/下线通知 3.提供主题的操作 (创建/删除/订阅/取消订阅) 消息的发布 2.服务的模块划分 1.网络通信模块 net 底层套用的moude库 2.应用层通信协议模块 1.序列化反序列化数…...

编程日记 2025/6/24 19:50:39

数据分析和可视化:Py爬虫-XPath解析章节要点总结

重要知识点 XPath 概述：XPath 是一门可以在 XML 文件中查找信息的语言，也可用于 HTML 文件。它功能强大，提供简洁明了的路径表达式和多个函数，用于字符串、数值、时间比较等。1999 年成为 W3C 标准，常用于爬虫中抓取网…...

编程日记 2025/6/24 21:35:22

WIFI原因造成ESP8266不断重启的解决办法

一、报错报错信息如下： 21:37:21.799 -> ets Jan 8 2013,rst cause:2, boot mode:(3,7) 21:37:21.799 -> 21:37:21.799 -> load 0x4010f000, len 3424, room 16 21:37:21.799 -> tail 0 21:37:21.799 -> chksum 0x2e 21:37:21.799 -> loa…...

编程日记 2025/6/25 5:30:38

OSI网络通信模型详解

OSI 模型就是把这整个过程拆解成了 7 个明确分工的步骤，每一层只负责自己那一摊事儿，这样整个系统才能顺畅运转，出了问题也容易找到“锅”在谁那。核心比喻：寄快递 📦 想象你要把一份重要的礼物（你的数据…...

编程日记 2025/6/24 19:34:24

第五章中央处理器

5.1 CPU的功能和基本构造 5.1.1 CPU的基本功能 5.1.2 CPU的基本结构 1.运算器算术逻辑单元ALU 累加寄存器ACC 程序字状态寄存器PSW 计数器CT 暂存寄存器通用寄存器组移位器通用寄存器供用户自由编程，可以存放数据和地址。而指令寄存器是专门用于存放指令的专用寄存器，…...

编程日记 2025/6/25 5:43:09

大模型学习入门——Day3:注意力机制

本系列笔记的教材：快乐学习大模型-DataWhale团队注意力机制注意力机制最先源于计算机视觉领域，其核心思想为当我们关注一张图片，我们往往无需看清楚全部内容而仅将注意力集中在重点部分即可。而在自然语言处理领域，我们往往也…...

编程日记 2025/6/25 5:41:38

C++ 学习笔记精要(二)

第一节特殊类的设计 1. 一个类: 只能在堆上创建对象关键点:自己控制析构 1.1 方法一: 使用delete禁掉默认析构函数 #include <iostream> using namespace std;class HeapOnly { public:HeapOnly(){_str new char[10];}~HeapOnly() delete;void Destroy(){delete[…...

编程日记 2025/6/25 16:48:02

博士，超28岁，出局！

近日，长沙市望城区《2025年事业引才博士公开引进公告》引发轩然大波——博士岗位年龄要求28周岁及以下，特别优秀者也仅放宽至30周岁。图源：网络这份规定让众多"高龄"博士生直呼不合理，并在社交平台掀起激烈讨论。图源…...

编程日记 2025/6/24 13:56:26

macOS - 根据序列号查看机型、保障信息

文章目录最近在看 MacBook 二手机，有个咸鱼卖家放个截图说不清参数，于是想根据序列号查看机型。苹果提供了这样的网页： https://checkcoverage.apple.com/ （无需登录） 结果 2025-06-20（五）…...

编程日记 2025/6/25 23:12:10

C/C++ 高频八股文面试题1000题(一)

原作者：Linux教程，原文地址：C/C 高频八股文面试题1000题(一) 在准备技术岗位的求职过程中，C/C始终是绕不开的核心考察点。无论是互联网大厂的笔试面试，还是嵌入式、后台开发、系统编程等方向的岗位，C/C 都…...

编程日记 2025/6/25 5:43:09

C++ map 和 unordered_map 的区别和联系

C map 和 unordered_map 的区别和联系 map 和 unordered_map 都是 C 标准库中关联容器，用于存储键值对。它们的主要区别在于底层实现和性能特性，联系在于它们都提供了键值对的存储和访问功能。区别： 特性mapunordered_map底层实现红黑树 …...

编程日记 2025/6/25 22:44:42

Sentinel实现原理

Sentinel 是阿里巴巴开源的分布式系统流量控制组件，主要用于服务保护，涵盖流量控制、熔断降级、系统负载保护等功能。以下是 Sentinel 的实现原理，使用中文简要说明： 1. 总体架构 Sentinel 采用轻量级设计，分为核…...

编程日记 2025/6/25 5:42:39

python打卡day37

疏锦行知识点回顾： 1. 过拟合的判断：测试集和训练集同步打印指标 2. 模型的保存和加载 a. 仅保存权重 b. 保存权重和模型 c. 保存全部信息checkpoint，还包含训练状态 3. 早停策略作业：对信贷数据集训练后保存权重&#xf…...

编程日记 2025/6/26 20:19:41

MySQL复杂查询优化实战：从多表关联到子查询的性能突破

文章目录一、复杂查询性能瓶颈分析与优化框架二、多表关联查询的优化策略与实战1. JOIN顺序优化：基于成本估算的表关联策略2. 复合索引与JOIN条件优化3. 大表JOIN的分片处理三、子查询优化：从嵌套到JOIN的转换艺术1. 标量子查询转换为JOIN2. EXISTS子查…...

编程日记 2025/6/27 0:43:27

文章目录

shallowReactive

使用 shallowReactive

shallowRef

使用 shallowRef

适用场景

总结

相关文章：

`shallowReactive`

使用 `shallowReactive`

`shallowRef`

使用 `shallowRef`