vue3 响应式 API:shallowRef()和shallowReactive()

news/2024/9/16 17:48:39/ 标签: vue.js, javascript, 前端

shallowRef()

shallowRef()是一个用于创建浅层响应式引用的函数。它创建一个响应式数据,但只对顶层属性进行响应式处理。

特点: 只跟踪引用值的变化,不关心值内部的属性变化。

<template><div>{{ shallowRefObj }}</div><button @click="changeShallowRefObj">直接修改shallowRefObj</button><button @click="changeMessage">修改message属性</button>
</template>
<script setup lang="ts">javascript">
import { shallowRef } from 'vue';
const shallowRefObj = shallowRef({ message: 'Hello' 
})const changeShallowRefObj = () => {// 以下操作会触发响应式更新,因为直接修改了引用本身shallowRefObj.value = { message: 'hello World!' }
}const changeMessage = () => {// 以下操作不会触发响应式更新,因为只是修改了引用对象的属性shallowRefObj.value.message = 'New message'console.log('执行changeMessage()后:', shallowRefObj)
}
</script>
  1. 执行changeShallowRefObj方法,修改shallowRefObj,触发响应式更新:
    在这里插入图片描述
  2. 执行changeMessage 方法,修改shallowRefObjmessage属性,不会触发响应式更新。
  • 执行方法后,devtools查看setup里的数据、页面渲染结果如上图所示,shallowRefObjmessage属性值没有任何改变。
  • 查看console.log('执行changeMessage()后:', shallowRefObj)在控制台的打印结果:shallowRefObjmessage属性值已经被修改。
    在这里插入图片描述

ref()的区别

  • ref()创建的是深度响应式引用,对引用对象的属性的修改也会触发响应式更新。
  • shallowRef()创建的浅层 ref 的内部值将会原样存储和暴露,并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。

应用场景

shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。



shallowReactive()

shallowReactive()是一个用于创建浅层响应式对象的函数。

shallowReactive()创建的响应式对象是浅层的:

  • 只有对象的直接属性是响应式的,对象内部的嵌套属性不是响应式的。
<template><div>{{ shallowReactiveObj }}</div><button @click="changeMessage">修改message属性</button><button @click="changeProperty">修改property属性</button>
</template>
<script setup lang="ts">javascript">
import { shallowReactive } from 'vue';
const shallowReactiveObj = shallowReactive({message: 'Hello',nestedObject: {property: 'value'}
});const changeMessage = () => {// 以下操作会触发响应式更新,因为直接修改了浅层响应式对象的属性shallowReactiveObj.message = 'hello World!'
};const changeProperty = () => {//  以下操作不会触发响应式更新,因为是修改嵌套对象的属性shallowReactiveObj.nestedObject.property = 'New Value';console.log('执行changeProperty()后:', shallowReactiveObj);
};
</script>
  1. 执行changeMessage方法,修改浅层响应式对象shallowReactiveObjmessage属性,触发响应式更新:

在这里插入图片描述

  1. 执行changeProperty方法,修改浅层响应式对象shallowReactiveObj 的嵌套属性property,不会触发响应式更新:
  • 执行方法后,devtools查看setup里的数据、页面渲染结果如上图,shallowReactiveObj的嵌套属性property没有任何改变。
  • 查看console.log('执行changeProperty()后:', shallowReactiveObj);在控制台的打印结果:shallowReactiveObj的嵌套属性property已经被修改。
    在这里插入图片描述

reactive()的区别

  • reactive()创建的是深度响应式对象,对象的所有属性(包括嵌套对象的属性)都是响应式的。
  • shallowReactive()创建的浅层响应式对象里只有根级别的属性是响应式的。属性的值会被原样存储和暴露,这也意味着值为 ref 的属性不会被自动解包了。

http://www.ppmy.cn/news/1521672.html

相关文章

Tortoise-ORM FastAPI integration 中文文档(完整版)

Tortoise-ORM FastAPI integration 中文文档(完整版) 前言 初衷:在学习的时候发现 Tortoise-ORM FastAPI integration 官方文档缺中文版,翻阅英文文档效率低,萌生翻译想法。 本系列旨在原汁原味的翻译 Tortoise-ORM FastAPI integration 官方文档,帮助英语不好的小伙伴快速…

电脑桌面一键整理,高效整理,让你的电脑桌面焕然一新!

电脑桌面整理是一个能够提高工作效率、增强安全性、简化资产管理、改善用户体验的电脑软件。无论是图标管理还是文件整理&#xff0c;通过专业的电脑桌面整理软件都能轻松搞定&#xff0c;有序的管理文件、应用程序。 下面是关于Windows桌面工具的介绍与说明&#xff01; 一、…

在 “Label Studio” 和 “Android Studio” 中,“studio”的含义

这个词通常有以下含义&#xff1a; 一、工作场所或空间 可以理解为一个专门用于特定任务的工作区域。就像艺术家的工作室是他们进行创作的地方一样&#xff0c;在软件领域&#xff0c;这些带有 “studio” 的工具为开发者或使用者提供了一个集中进行特定开发、标注等工作的环…

使用 OpenSSL 创建自签名证书

mkdir -p /etc/nginx/conf.d/cert #2、创建私钥 openssl genrsa -des3 -out https.key 1024 提示输入字符&#xff1a; 输入字符&#xff1a;rancher [rootocean-app-1a-01 cert]# openssl genrsa -des3 -out https.key 1024 Generating RSA private key, 1024 bit long modulu…

JAVA集合的扩容机制

ArrayList List<Integer> list new ArrayList<>(); 不指定初始长度&#xff0c;默认刚开始赋值{}空集合&#xff0c;当 add 时&#xff0c;初始长度为 10。 // 初始容量 private static final int DEFAULT_CAPACITY 10; // 空数组 private static final Objec…

Python 全栈系列266 Kafka服务的Docker搭建

说明 在大量数据处理任务下的缓存与分发 这个算是来自顾同学的助攻1&#xff0c;我有点java绝缘体的体质&#xff0c;碰到和java相关的安装部署总会碰到点奇怪的问题&#xff0c;不过现在已经搞定了。测试也接近了kafka官方标称的性能。考虑到网络、消息的大小等因素&#xff0…

IOS17.0安装巨魔:TrollRestore巨魔发布

&#x1f47b; TrollRestore 17.0 巨魔发布 15.0 - 16.7 RC&#xff08;20H18&#xff09;和17.0。 官网&#xff1a;https://trollrestore.com/ 下载&#xff1a;https://pan.metanetdisk.com/IOS/%E5%B7%A8%E9%AD%94%E7%8E%A9%E5%AE%B6/TrollRestore.com 使用&#xff1a;ht…

点在面内(考虑内环外环)------射线算法

射线算法计算点是否在面内 , 考虑内环和外环的情况 // 判断点是否在线段上 bool on_segment(const studio_point& point, const studio_point& l_beg, const studio_point& l_end) {return std::min(l_beg.lgtd, l_end.lgtd) < point.lgtd && point.lg…

计算机网络 第二章: 物理层概述

文章目录 物理层要实现的功能物理层接口特性机械特性电气特性功能特性过程特性 物理层下面的传输媒体传输媒体的分类 传输方式习题答案 物理层要实现的功能 物理层要实现的功能是在各种传输媒体上, 传输0和1吗进而给其上面的数据链路层提供透明传输比特流的服务. (透明传输比特…

硬件工程师笔试面试知识器件篇——二极管

目录 4、二极管 4.1、基础 二极管原理图 二极管实物图 4.1.1、基本特性 4.1.2、常见类型 4.1.3、工作原理 4.1.4、应用领域 4.2、相关问题 4.2.1、二极管的PN结是如何形成的? 4.2.2、发光二极管(LED)的工作原理是什么? 4.2.3、在电子电路中,二极管通常如何应用?…

MySQL Workbench 的入门指南

前言 MySQL Workbench 是一个官方的图形化工具&#xff0c;用于开发、管理和设计 MySQL 数据库服务器。它提供了丰富的功能&#xff0c;可以帮助数据库管理员、开发者以及DBA们高效地工作。下面是一个MySQL Workbench的入门指南&#xff0c;介绍如何安装和使用它。 安装 MyS…

虚拟机苹果系统MacOS中XCode的安装

1、背景介绍 主机系统Win11&#xff0c;虚拟机VMWare17&#xff0c;苹果系统MacOS 13.6.7 2、Xcode的在线 点击应用市场&#xff0c;输入Xcode搜索&#xff1a; 看来Xcode无法安装在macOS V13上&#xff0c;直接在线安装失败。 3、采用下载安装包的方法进行安装 解决办法参考链…

ChatTTS文本转语音本地Windows环境部署与远程生成AI音频实战流程

文章目录 前言1. 下载运行ChatTTS模型2. 安装Cpolar工具3. 实现公网访问4. 配置ChatTTS固定公网地址 前言 本篇文章主要介绍如何快速地在Windows系统电脑中本地部署ChatTTS开源文本转语音项目&#xff0c;并且我们还可以结合Cpolar内网穿透工具创建公网地址&#xff0c;随时随…

2024国赛数学建模C题论文:基于优化模型的农作物的种植策略

大家可以查看一下35页&#xff0c;包含结构完整&#xff0c;数据完整的C题论文&#xff0c;完整论文见文末名片 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 添加图片注释&#xf…

Java并发编程实战 04 | 使用WaitNotify时要注意什么?

在 Java 中&#xff0c;wait()、notify() 和 notifyAll() 方法在多线程编程中主要用于线程间的协作和同步。理解这些方法的使用特点对于编写稳定的多线程程序至关重要。我们将从以下三个问题入手深入探讨它们的使用&#xff1a; 为什么必须在 synchronized 代码块中使用 wait(…

LINUX-ubuntu20.04下安装GUI-Guider出现的依赖问题解决办法

个人安装遇见的问题&#xff0c;并且已解决&#xff0c;仅供参考&#xff01;&#xff01;&#xff01; 采用下载好gui-guider的安装包&#xff0c;然后离线安装的方式&#xff1b; 目录 问题&#xff1a; 一般方法 解决办法 问题&#xff1a; 发现出现下面的配置依赖问题…

算法训练营|图论第11天 Floyd算法 A*算法

题目&#xff1a;Floyd算法 题目链接&#xff1a; 97. 小明逛公园 (kamacoder.com) 代码&#xff1a; #include<bits/stdc.h> using namespace std; struct Edge {int to;int val;Edge(int t, int w) :to(t), val(w) {} }; int main() {int n, m;cin >> n >…

Java 快速求解x的x次幂结果为10

1.问题描述 如果x的x次幂结果为10&#xff08;如图所示&#xff09;&#xff0c;你能计算出x的近似值吗&#xff1f; 显然&#xff0c;这个值是介于2和3之间的一个数字。 可以使用牛顿迭代公式进行求解&#xff0c;因为是逼近算法可以大大减少运算次数 public static void mai…

【Leetcode 2367 】 等差三元组的数目 —— 哈希表与三指针

给你一个下标从 0 开始、严格递增 的整数数组 nums 和一个正整数 diff 。如果满足下述全部条件&#xff0c;则三元组 (i, j, k) 就是一个 等差三元组 &#xff1a; i < j < k &#xff0c;nums[j] - nums[i] diff 且nums[k] - nums[j] diff 返回不同 等差三元组 的数…

Flask中的g的作用

Flask中的g对象是一个非常重要的概念&#xff0c;它在Flask应用程序的上下文中扮演着关键角色。下面我将详细阐述g对象的作用&#xff0c;但由于篇幅限制&#xff0c;无法达到5000字&#xff0c;但会尽量全面而精炼地介绍其关键特性和用途。 Flask中的g是什么&#xff1f; 在…