shallowReactive浅层式响应对象

一、

 reactive 和ref 都是深层响应式对象: 就是不管对象有多少层,修改此对象任一属性都会响应式处理

 shallowReactive 和shallowRef 浅层响应式对象: 只会修改第一层对象,修改此对象第一层属性,视图会有同步变化,非第一层,数值会变,视图不会变。

例如有这样一个对象

{
id:1,
 name:'张三',
 car:{
     price: 7000,
     color: 'red'
 }
}

vue3中定义shallowReactive 对象后,修改id。视图会同步变化,如果修改的是car.price。视图不会变化,除非先修改car.price 对象,然后再修改id,这时第一层对象触发,会把这个对象更新。具体例子如下:

<script setup> 
  /**
   * reactive 和ref 都是深层响应式对象: 就是不管对象有多少层,修改此对象任一属性都会响应式处理
   * shallowReactive 和shallowRef 浅层响应式对象:
   * 
   * 
   */
  import {reactive,ref,shallowReactive} from 'vue';

  const state = reactive({
    id:1,
    name:'张三',
    car:{
      price: 7000,
      color: 'red'
    }
  });

  function updateStateId() {
    state.id++;
  };
  function updateStatePrice() {
    state.car.price++;
  };


  const stateRef = ref({
    id:1,
    name:'张三',
    car:{
      price: 7000,
      color: 'red'
    }
  });

  function updateRefStateId() {
    stateRef.value.id++;
  };
  function updateRefStatePrice() {
    //直接改非第一层数据,视图不更新,也就是多层级的数据是非响应式的
    stateRef.value.car.price++;
  };


  const shallowstate = shallowReactive({
    id:1,
    name:'张三',
    car:{
      price: 7000,
      color: 'red'
    }
  });

  function updateIdByShallowReactive() {
    shallowstate.id++;
  };

  function updatePriceByShallowReactive() {
    //直接改非第一层数据,视图不会更新,也就是多层级的数据是非响应式的
    shallowstate.car.price++;
  };

  function updatePriceAndIdByShallowReactive() {
    //直接改非第一层数据,视图不会更新,也就是多层级的数据是非响应式的
    shallowstate.car.price++;
    //当修改了第一层数据,也修改其他层数据,此时会将此对象所有的数据都更新视图
    //原理:当改变底层数据会触发该状态的监听器,将此状态所有数据更新到视图中
    shallowstate.id++;
  };

</script>

<template>
 
 <div>
    <p>reactive=={{ state.id }}=={{ state.car }}</p>
    <button @click="updateStateId">更新reactive</button>
    <button @click="updateStatePrice">更新reactiveprice</button>

    <p>ref=={{ stateRef.id }}=={{ stateRef.car }}</p>
    <button @click="updateRefStateId">更新ref</button>
    <button @click="updateRefStatePrice">更新ref price</button>
    <h4>function updatePriceAndIdByShallowReactive() {<br>
    //直接改非第一层数据,视图不会更新,也就是多层级的数据是非响应式的<br>
    shallowstate.car.price++;<br>
    //当修改了第一层数据,也修改其他层数据,此时会将此对象所有的数据都更新视图<br>
    shallowstate.id++;<br>
  };</h4>
    <p>shallowReactive=={{ shallowstate.id }}=={{ shallowstate.car }}</p>
    <button @click="updateIdByShallowReactive">shallowReactive更新id</button>
    <button @click="updatePriceByShallowReactive">shallowReactive更新car.price</button>
    <button @click="updatePriceAndIdByShallowReactive">shallowReactive更新car.price和id</button>

 </div>
</template>

<style scoped>

</style>

点击更新ref对象数据id++ 按钮,id属性加1

点击更新ref对象数据car.price++,car.price属性加1

点击更新reactive对象数据id++按钮,id属性加1

点击更新reactive对象数据car.price++,car.price属性加1

点击更新shallowReactive对象属性id++,id属性加1

点击更新shallowReactive对象属性car.price++,car.price属性加1,视图不更新。还是7000

点击更新shallowReactive对象属性car.price和id++,car.price和id属性都加1,并且shallowReactive视图更新。看到下图id加了1,price 加了2。

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

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

相关文章

JVM学习-底层字节码的执行过程

目录 1.一个简单的程序分析 2. a&#xff0c;a&#xff0c;a--在JVM中的执行过程 3. 一个好玩的xx 4.方法调用的字节码分析、多态的实现、对象头 5. try-catch-finally的字节码分析 5.1 try-catch 5.2 try-catch-finally 5.3特殊情况 5.3.1 try和finally块中都出现了re…

面向对象技术(第二周)

目录 前言 ⚽回顾 &#x1f3d0;类的层次 定义 层次关系的实现 &#x1f3c0;继承 &#x1f94e;编程方法 非面向对象编程 根本思想 特点 例子&#xff08;设计一个画板系统Panel&#xff09; 第一步&#xff1a;整体设计 第二步&#xff1a;模块具体设计 缺点分…

Linux 常用命令100+

Linux 运维/开发/测试 常用命令100(v1.1) 帮助命令(2个) 命令功能说明示例man 命令查看普通命令帮助&#xff0c;命令的词典&#xff0c;更复杂的还有info&#xff0c;但不常用。rootbrLinux ~]#man lshelp 命令查看Linux内置命令的帮助&#xff0c;比如cd命令。[rootbrLinux…

Apache zookeeper kafka 开启SASL安全认证

背景&#xff1a;我之前安装的kafka没有开启安全鉴权&#xff0c;在没有任何凭证的情况下都可以访问kafka。搜了一圈资料&#xff0c;发现有关于sasl、acl相关的&#xff0c;准备试试。 简介 Kafka是一个高吞吐量、分布式的发布-订阅消息系统。Kafka核心模块使用Scala语言开发…

拼多多商品详情接口数据采集

拼多多商品详情接口数据采集是一个相对专业的任务&#xff0c;通常涉及到使用API接口或第三方采集工具等技术手段。以下是一些基本步骤和注意事项&#xff0c;供您参考&#xff1a; 请求示例&#xff0c;API接口接入Anzexi58 申请开发者账号&#xff1a;如果您打算使用API接口…

基于java+springboot+vue实现的停车场车位预约系统(文末源码+Lw+ppt)23-442

摘 要 本系统为用户而设计制作合庆镇停车场车位预约系统&#xff0c;旨在实现合庆镇停车场车位预约智能化、现代化管理。本合庆镇停车场车位预约管理自动化系统的开发和研制的最终目的是将合庆镇停车场车位预约的运作模式从手工记录数据转变为网络信息查询管理&#xff0c;…

高光谱数据应用于植被监测与分析与数据获

1. 常用高光谱数据 (1) 航空成像光谱仪系统 国内系统&#xff1a;MAIS、OMIS-1、OMIS-2、PHI、WHI、LASIS 国外系统&#xff1a;AIS、AVIRIS、TRWIS、GERIS、HYDICEAISA、DAIS、CASI、HYMAP (2) 航天成像光谱仪 Hyperion/EO-1 环境与减灾小卫星星座&#xff08;HJ-1B&…

ChatGPT GPT4科研应用、数据分析与机器学习、论文高效写作、AI绘图技术

原文链接&#xff1a;ChatGPT GPT4科研应用、数据分析与机器学习、论文高效写作、AI绘图技术https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247596849&idx3&sn111d68286f9752008bca95a5ec575bb3&chksmfa823ad6cdf5b3c0c446eceb5cf29cccc3161d746bdd9f2…

IPy,一个超级有用的Python库

更多内容在 Python 的 IPy 库是一个专门用于处理 IP 地址和网络相关操作的第三方库。它提供了丰富的功能&#xff0c;可以帮助用户轻松地进行 IP 地址的解析、格式化、比较和范围计算等操作。以下是 IPy 库的一些主要特性和功能&#xff1a; IP 地址解析与表示&#xff1a;IPy …

展开说说:Android之SharedPreferences

SharedPreferences 是一种轻量级的数据持久化存储机制。以key/value键值对形式存储在xml文件&#xff0c;用于保存一些应用程序数据。保存在 /data/data/PACKAGE_NAME/shared_prefs/xxx.Xml文件。 SharedPreferences 只能存储string&#xff0c;int&#xff0c;float&#xff…

实战!wsl 与主机网络通信,在 wsl 中搭建服务器。学了计算机网络,但只能刷刷面试题?那也太无聊了!这篇文章可以让你检测你的计网知识!

前言&#xff08;碎碎念&#xff09;&#xff1a;每次发布文章时&#xff0c;我都是一个纠结的过程。因为我给自己写笔记时&#xff0c;只需要记录自己不清晰或者易忘的知识点就可以了&#xff0c;但一旦想要作为文章发布&#xff0c;那么我就得考虑到很多人是纯新手&#xff0…

【Git】本地仓库关联远程仓库

Git 本地项目关联远程仓库 本地 本地已有项目 ● 项目 07.GitLocalTest 包含有一个js ○ test.js 远程仓库 ● 远程仓库地址 ○ https://github.com/Sonnenlicht77/gitTest.git ○ 仓库只有一个 readme.md 关联 1.本地 1.1 本地仓库 ● git init ● git add . ● gi…

[Node.js] Node.js 版本控制工具 nvm/n/fnm

文章目录 Node.jsNode.js 版本控制工具介绍nvm (Node Version Manager)nfnm (Fast Node Manager) Node.js Node.js 是一个开源与跨平台的 JavaScript 运行环境&#xff0c;它允许 JavaScript 运行&#xff0c; Node.js 使用事件驱动、非阻塞的 I/O 模型&#xff0c;使其轻量且…

HSE化工应急安全生产管理平台:衢州某巨大型化工企业的成功应用

在化工行业中&#xff0c;安全生产一直是至关重要的议题。为了提高生产安全性、降低成本并提升企业形象&#xff0c;衢州某巨大型化工企业引入了HSE化工应急安全生产管理平台&#xff0c;取得了显著的改善和获益。 该平台的核心功能包括风险管理和应急预案制定。通过对化工生产…

JVM学习-垃圾回收专题

目录 1.如何判断对象可以回收 1.1引用计数法 1.2可达性分析算法 1.3五种引用 1.4拓展&#xff1a;直接内存 2.垃圾回收算法 2.1标记清除算法 2.2标记整理算法 2.3复制 3.分代垃圾回收 3.垃圾回收器 3.1串行垃圾回收器 3.2吞吐量优先垃圾回收器 3.3响应时间优先垃圾回收器…

51单片机-AT24C02(I2C总线)

目录 一&#xff0c;介绍及元件工作原理 7.时序结构&#xff08;重要&#xff09; 8.i2C总线数据帧&#xff08;重要&#xff09; 二&#xff0c;应用 一&#xff0c;介绍及元件工作原理 1.元件介绍 2.存储器 3.地址总线和数据总线 地址总线只能一次选中一行 4.引脚及应用…

python之自动化(django)

1、安装 我用的是pip install Django 在命令行中安装 然后django-admin startproject autotext&#xff08;在命令行中&#xff09; 这句话是创建一个django 项目 然后切换到你所创建项目的目录下 输入&#xff1a; python manage.py runserver 当你出现以下错误时 You…

[沉淀之华] 自研基于SpringBoot Mybaits 构建低代码数据治理脚手架分享:涵盖数据同步、数据比对、数据归档、数据恢复为一体

文章目录 成果演示背景整体能力功能描述相关细节安装使用 成果演示 Github地址&#xff1a;数据治理脚手架 wiki&#xff1a;kg-ctl-core使用文档 背景 为什么要做这个&#xff1f; 一个老生常谈且不得不谈问题&#xff1a;随着业务日益发展&#xff0c;如果不做数据迁移&…

【大模型系列】问答理解定位(Qwen-VL/Llama2/GPT)

文章目录 1 Qwen-VL(2023, Alibaba)1.1 网络结构1.2 模型训练 2 Llama2(2023, Meta)2.1 网络结构2.1.1 MHA/GQA/MQA2.1.2 RoPE(Rotary Position Embedding, 旋转式位置编码)2.1.3 RMSNorm 2.2 推理2.2.1 集束搜索(beam search)2.2.2 RoPE外推 3 GPT系列(OpenAI) 1 Qwen-VL(2023…

深度强化学习(六)(改进价值学习)

深度强化学习(六)(改进价值学习) 一.经验回放 把智能体与环境交互的记录(即经验)储存到 一个数组里&#xff0c;事后反复利用这些经验训练智能体。这个数组被称为经验回放数组&#xff08;replay buffer&#xff09;。 具体来说, 把智能体的轨迹划分成 ( s t , a t , r t ,…