vue3 ref,shallowRef,reactive,shallowReactive使用的简单异同点说明

1、这几个都是负责data的存储及读取的,我们常用的是ref,reactive。

2、看一下shallowRef这个,shallowReactive与其类似。

说明:以官网的说明,这个state.value.count = 2是不会触发视图更新的,但是如果直接在<script setup lang="ts"></script>中直接修改的时候,你会发现这个数据是更改了,并且视图也会更新,并不是原始值。

但是如果在onMounted里写,那么这个视图是不会被更新的。

3、那么我们增加一个按钮事件add来触发下,看看效果:

我们会发现,如果只是修改shallowRef的nested.count++,那么也是不会被更新。

有一点先重要,我们把上面的二行注解去掉,add中会同时去更新ref的变量值,再来看看效果:

4、完整代码:

<template>
  <div>
    <h1>Ref</h1>
    {{ stateref }}
    <h1>Reactive</h1>
    {{ statereactive }}
    <h1>ShallowRef</h1>
    {{ state }}
    <input type="text" v-model="state.greet" />
    <h1>ShallowReactive</h1>
    {{ stater }}
    <br />
    <br />
    <button @click="add">add</button>
  </div>
</template>
<script setup lang="ts">
import {
  onMounted,
  reactive,
  ref,
  shallowReactive,
  shallowRef,
  unref,
} from "vue";
const statereactive = reactive({
  count: 1,
  greet: "Hello, world",
  nested: { count: 1 },
  list: [
    {
      id: 1,
      name: "a",
    },
    {
      id: 2,
      name: "b",
    },
  ],
});
const stateref = ref({
  count: 1,
  greet: "Hello, world",
  nested: { count: 1 },
  list: [
    {
      id: 1,
      name: "a",
    },
    {
      id: 2,
      name: "b",
    },
  ],
});
const stater = shallowReactive({
  count: 1,
  greet: "Hello, world",
  nested: { count: 1 },
  list: [
    {
      id: 1,
      name: "a",
    },
    {
      id: 2,
      name: "b",
    },
  ],
});
const state = shallowRef({
  count: 1,
  greet: "Hello, world",
  nested: { count: 1 },
  list: [
    {
      id: 1,
      name: "a",
    },
    {
      id: 2,
      name: "b",
    },
  ],
});

onMounted(() => {
  // stateref.value.count = 2;
  // stateref.value.greet = "Hello, Vue 3";
  // stateref.value.nested.count = 2;
  // stateref.value.list[0].name = "c";
  // console.log(JSON.stringify(unref(stateref))); // 2

  // statereactive.count = 2;
  // statereactive.greet = "Hello, Vue 3";
  // statereactive.nested.count = 2;
  // statereactive.list[0].name = "c";
  // console.log(JSON.stringify(unref(statereactive))); // 2

  // 不会触发更改
  state.value.count = 2;
  state.value.greet = "Hello, Vue 3";
  state.value.nested.count = 2;
  state.value.list[0].name = "c";
  console.log(JSON.stringify(unref(state))); // 2

  // stater.count = 2;
  // stater.greet = "Hello, Vue 3";
  // stater.nested.count = 2;
  // stater.list[0].name = "c";
  // console.log(JSON.stringify(unref(stater))); // 2
  // 会触发更改
  // state.value = { count: 2 }
  // console.log(state.value.count) // 2
});

function add() {
  state.value.nested.count++;
  console.log(state.value.nested.count);
  stateref.value.nested.count++;
  console.log(stateref.value.nested.count);
  //如果add中直接调用上面代码,内嵌模式不需要写.value
}
</script>

5、总结:

1)单独的去修改shallowRef,shallowReactive变量的值,值是变了,但是视图是不会被响应的,但是如果我们在<script>...</script>中直接改变量的值的时候,是会更改视图显示的,在onMounted中写是不会的,视图不会响应,但值是变了。

2)如果我们在shallowRef,shallowReactive变量的值改变后,再去修改ref,reactive定义的值的时候,视图变成响应式,这样shallowRef,shallowReactive的视图也会一并被更新。

所以如果有些场景考虑到大数据结构的效率的时候,我们要根据这些原理去使用,这样就简单明了了。如果只是console.log是测试不出来问题的,因为一直会改变的。区别只在视图有没有响应。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java | Leetcode Java题解之第517题超级洗衣机

题目&#xff1a; 题解&#xff1a; class Solution {public int findMinMoves(int[] machines) {int tot Arrays.stream(machines).sum();int n machines.length;if (tot % n ! 0) {return -1;}int avg tot / n;int ans 0, sum 0;for (int num : machines) {num - avg;s…

二分,CF 2036 G - Library of Magic

目录 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 G - Library of Magic 二、解题报告 1、思路分析 首先 query(1, n) a ^…

Llama 3.2 Vision Molmo:多模态开源生态系统基础

编者按&#xff1a; 视觉功能的融入对模型能力和推理方式的影响如何&#xff1f;当我们需要一个既能看懂图像、又能生成文本的 AI 助手时&#xff0c;是否只能依赖于 GPT-4V 这样的闭源解决方案&#xff1f; 我们今天为大家分享的这篇文章&#xff0c;作者的核心观点是&#xf…

【android12】【AHandler】【4.AHandler原理篇ALooper类方法全解】

AHandler系列 【android12】【AHandler】【1.AHandler异步无回复消息原理篇】-CSDN博客 【android12】【AHandler】【2.AHandler异步回复消息原理篇】-CSDN博客 【android12】【AHandler】【3.AHandler原理篇AHandler类方法全解】-CSDN博客 其他系列 本人系列文章-CSDN博客…

探索NetCat:网络流量监测与数据传输的利器

从简单的数据传输到复杂的网络调试&#xff0c;NetCat的灵活性和多功能性让人赞叹不已&#xff0c;在这篇文章中我将深入探讨NetCat的魅力&#xff0c;揭示它的基本功能、实用技巧以及在日常工作中的应用场景&#xff0c;发现如何用这一小工具提升的网络技能与效率。 目录 Net…

UE4安卓Gradle工程中的libUE4.so的生成原理

流程图 流程图放在最前面&#xff0c;下面是讲解。 libUE4.so 问&#xff1a;在UE4安卓开发中&#xff0c;libUE4.so即是符号表&#xff0c;又是引擎代码native&#xff0c;是吗&#xff1f; 答&#xff1a;是的&#xff0c;libUE4.so在UE4安卓开发中既包含符号表&#xff0c;…

wireshark抓包查看langchain的ChatOpenAI接口发送和接收的数据

1. 引入 当我们用vllm部署一个大模型&#xff0c;就可以调用langchain的ChatOpenAI()接口来访问大模型&#xff08;具体过程参考[1]&#xff09;&#xff0c;这也是langchain的Agent的基础接口使用方式。 那么问题来了&#xff0c;这个接口是使用哪种方式与大模型进行通信的呢…

ubuntu 24.04中安装 Easyconnect,并解决版本与服务器不匹配问题

下载安装包 下载地址 https://software.openkylin.top/openkylin/yangtze/pool/all/ 页面搜索 easyconnect 选择 easyconnect_7.6.7.3.0_amd64.deb安装 sudo dpkg --install easyconnect_7.6.7.3.0_amd64.deb卸载 sudo dpkg --remove easyconnect出现的问题 安装以后第…

arcgis坐标系问题

2000数据框的工程只能打开2000坐标系的矢量数据和栅格数据&#xff08;影像图&#xff09;&#xff0c;如果打开80的数据则会投影错误&#xff0c;出现较大偏差。 解决方案&#xff1a;80数据框打开80数据&#xff0c;2000数据库打开2000数据。

0-1规划的求解

实验类型&#xff1a;◆验证性实验 ◇综合性实验 ◇设计性实验 实验目的&#xff1a;学会使用Matlab编程实现求解0-1规划。 实验内容&#xff1a;1.学习使用Matlab定义子函数的命令function&#xff1b; 2.编程求解0-1型整数规划的枚举法或隐枚举法。 例1&#xff1a;求…

RNN与Self-Attention

文章目录 1. SimpleRNN1.1 h t h_t ht​计算1.2 激活函数 2. SimpleRNNSelf-Attention2.1 状态更新2.2 权重 α α α 1. SimpleRNN 学习视频&#xff1a;https://www.youtube.com/watch?vCc4ENs6BHQw&t0s 对于时序数据&#xff0c;输入输出都不固定&#xff0c;需要ma…

R-CNN,Fast R-CNN,

R-CNN R-CNN可以说是利用深度学习进行目标检测的开山之作 RCNN算法流程可分为4个步骤 - 一张图像生成1K~2K个候选区域(使用Selective Search方法) - 对每个候选区域&#xff0c;使用深度网络提取特征 - 特征送入每一类的SVM 分类器&#xff0c;判别是否属于该类 - 使用回归器…

C++/list

目录 1.list的介绍 2.list的使用 2.1list的构造 2.2list iterator的使用 2.3list capacity 2.4list element access 2.5list modifers 2.6list的迭代器失效 3.list的模拟实现 4.list与vector的对比 欢迎 1.list的介绍 list的文档介绍 cplusplus.com/reference/list/li…

人工智能证书合集

本文将对目前市面上主流官方机构颁发的人工智能证书进行整理和介绍&#xff0c;由于整理的证书较多&#xff0c;本文共一万八千多字&#xff0c;请根据自己的考证需求阅读对应部分的内容&#xff0c;希望本文对人工智能行业的从业人员和计划从事人工智能相关岗位工作的人员有所…

TongWeb7.0.E.6_P11嵌入式版本使用指引(by lqw)

文章目录 声明相关概念手册的使用示范工程安装工程介质 安装前准备示范工程参考&#xff08;spring-boot-helloWorld-2.x&#xff09;示范参考 声明 1.本文参考001_TongWeb_V7.0嵌入式版_JavaEE标准容器用户指南_70E6_P11A01.pdf&#xff0c;实际以最新更新的手册为准。 2.本文…

鸿蒙开发融云demo发送图片消息

鸿蒙开发融云demo发送图片消息 融云鸿蒙版是不带UI的&#xff0c;得自己一步步搭建。 这次讲如何发送图片消息&#xff0c;选择图片&#xff0c;显示图片消息。 还是有点难度的&#xff0c;好好看&#xff0c;好好学。 一、思路&#xff1a; 选择图片用&#xff1a;photoVie…

开源OCR免费助力法律文档数字化,提升文档管理效率

一、在法律行业&#xff0c;每天需要处理大量纸质文件&#xff0c;从合同到判决书&#xff0c;手动录入不仅费时&#xff0c;还容易出错。为解决这一问题推出了一款免费开源的OCR智能识别平台&#xff0c;通过先进的光学字符识别&#xff08;OCR&#xff09;技术&#xff0c;将…

详解ReentrantLock--三种加锁方式

目录 介绍AQS: 直观方式解释加锁的流程&#xff1a; Node是什么&#xff1a;它里面有什么属性呢 图解队列的排队过程&#xff1a; 源码分析三种加锁流程&#xff1a; 我们先讲解一下非公平锁的加锁流程&#xff1a; Lock()方式加锁&#xff1a; 在源码里对于Lock()的解…

【教程】Git 标准工作流

目录 前言建仓&#xff0c;拉仓&#xff0c;关联仓库修改代码更新本地仓库&#xff0c;并解决冲突提交代码&#xff0c;合入代码其他常用 Git 工作流删除本地仓库和远程仓库中的文件日志打印commit 相关 前言 Git 是日常开发中常用的版本控制工具&#xff0c;配合代码托管仓库…

Postman断言与依赖接口测试详解!

在接口测试中&#xff0c;断言是不可或缺的一环。它不仅能够自动判断业务逻辑的正确性&#xff0c;还能确保接口的实际功能实现符合预期。Postman作为一款强大的接口测试工具&#xff0c;不仅支持发送HTTP请求和接收响应&#xff0c;还提供了丰富的断言功能&#xff0c;帮助测试…