vue3 ref reactive响应式数据,赋值的问题、解构失去响应式问题

在 Vue3 中,使用 ref 和 reactive 创建响应式数据时,赋值操作和解构赋值存在一些需要注意的事项。以下是对这些问题的详细解答以及代码示例:

  1. ref reactive 的基本用法

    • ref:主要用于基本数据类型(如 Number、String、Boolean )的响应式处理。通过 .value 属性访问和修改值。
    • reactive:适用于对象或数组类型的数据,将其转换为响应式。直接访问和修改对象的属性。
  2. 响应式数据赋值的问题

    • 错误示范:直接赋值会导致响应性丢失。
      let list = ref([]);
      getList();async function getList() {list = await httpGetList();  // 直接赋值错误
      }function httpGetList() {return new Promise((resolve, reject) => {setTimeout(() => {resolve([1, 2, 3, 4, 5]);}, 500);});
      }
    • 正确写法:应通过 .value 属性进行赋值。
      let list1 = ref([]);
      getList1();async function getList1() {list1.value = await httpGetList();  // 通过 .value 赋值
      }
  3. reactive 对象的赋值问题

    • 错误示范:直接赋值会导致响应性丢失。
      let list = reactive([]);
      getList();async function getList() {list = await httpGetList();  // 直接赋值错误
      }
    • 正确写法:应使用数组方法如 push 来修改内容。
      let list2 = reactive([]);
      getList2();async function getList2() {let resp = await httpGetList();list2.push(...resp);  // 使用 push 方法修改内容
      }
  4. 解构赋值失去响应性的问题

    • 原因:解构赋值会将响应式对象的属性复制到新变量,导致新变量失去响应性。
    • 解决方法:使用 toRefs 函数将响应式对象转换为包含多个 ref 的对象,确保每个属性保持响应性。
      import { reactive, toRefs } from 'vue';const state = reactive({name: '张三',age: 14
      });const stateAsToRefs = toRefs(state);
      // stateAsToRefs 现在是一个包含 ref 属性的对象
      console.log(stateAsToRefs.name.value);  // 输出:张三
      stateAsToRefs.name.value = '李四';
      console.log(state.name);  // 输出:李四

总结来说,在 Vue3 中使用 ref 和 reactive 时,应注意正确的赋值方式和解构赋值导致的响应性丢失问题。通过合理使用 .value 属性和 toRefs 函数,可以有效避免这些问题,确保数据的响应性。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小米路由器开启SSH,配置阿里云ddns,开启外网访问SSH和WEB管理界面

文章目录 前言一、开启SSH二、配置阿里云ddns1.准备工作2.创建ddns脚本3.添加定时任务 三、开启外网访问SSH和WEB管理界面1、解除WEB管理页面访问限制2.手动添加防火墙端口转发规则,开启外网访问WEB管理和SSH 前言 例如:随着人工智能的不断发展&#xf…

什么是ESC ---- 防止车辆打滑并提高驾驶时稳定性的技术

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所谓鸡汤,要么蛊惑你认命,要么怂恿你拼命,但都是回避问题的根源&…

LinkedList类 (链表)

目录 一. LinkedList 基本介绍 二. LinkedList 中的法及其应用 1. 添加元素 (1) add() (2) addAll() (3) addFirst() (4) addLast() 2. 删除元素 (1) remove() (2) removeAll() (3) removeFirst() (4) removeLast() 3. 遍历元素 (1) for 循环遍历 (2) for - each …

复习打卡大数据篇——Hadoop MapReduce

目录 1. MapReduce基本介绍 2. MapReduce原理 1. MapReduce基本介绍 什么是MapReduce MapReduce是一个分布式运算程序的编程框架,核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算程序,并发运行在Hadoop集群上。 MapRed…

Java基础知识(四) -- 面向对象(下)

1.类变量和类方法 1.1 类变量背景 有一群小孩在玩堆雪人,不时有新的小孩加入,请问如何知道现在共有多少人在玩? 思路分析: 核心在于如何让变量count被所有对象共享 public class Child {private String name;// 定义静态变量(所有Child对象共享)public static int count 0;p…

SpringBoot中使用TraceId进行日志追踪

**查询日志的痛点:**项目中每当我们查询日志的时候都是看前端请求什么接口,根据一些关键字进入服务器查询日志中是否有这个关键字,然而这个关键字在日志里面并不是唯一的,所以要生成一个唯一的标识,每一次请求都是唯一…

C++类与对象上

1.面向过程和面向对象初步认识 C语言是面向过程的,关注的是过程,分析出求解问题的步骤,通过函数调用逐步解决问题 例如洗衣服: C是基于面向对象的,关注的是对象,讲一件事拆分成不同的对象,靠对…

openfeign自动将Boolean默认为false

最近发现项目服务间,通过openfeign调用API时,为null的Boolean类型,接收端反系列化后变为false了,经查发现是通用组件中做了处理,特记录下。 主要是设置了这个 SerializerFeature.WriteNullBooleanAsFalse Bean Cond…

制造BOM的应用思考

一、制造BOM的作用 制造BOM(Manufacturing BOM,MBOM)在制造过程中的应用非常广泛,具体包括以下几个方面: 1. 生产计划和调度: 制造BOM提供了生产过程中所需的所有输入及输出间的关系,包括材料、部品的数量、结构以及制程等信息。这些信息是生产拉动物料需求计划以及成本…

向量组学习

向量组的秩及其线性组合 线性相关性 先看a1,a2 如果这两个向量不对应成比例的话,那必然内部不可能存在多余的向量,也就是无关. 主元所在的列都是独立向量 ,最大无关组就是b1,b2,b4,但这个是初等行变换后的,题目要的是A的,与之对应的就是a1,a2,a4 方程组解的结构

使用VS Code开发ThinkPHP项目

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《ThinkPHP 8高效构建Web应用 夏磊 编程与应用开发丛书 清华大学出版社》【摘要 书评 试读】- 京东图书 ThinkPHP 8开发环境安装-CSDN博客 安装ThinkPHP项目的IDE 常用的集成开发环境(IDE)包括P…

【WebSocket】tomcat内部处理websocket的过程

websocket请求格式 浏览器请求 GET /webfin/websocket/ HTTP/1.1。 Host: localhost。 Upgrade: websocket。 Connection: Upgrade。 Sec-WebSocket-Key: xqBt3ImNzJbYqRINxEFlkg。 Origin: http://服务器地址。 Sec-WebSocket-Version: 13。 服务器响应 HTTP/1.1 101 Swi…

软件耦合类型及相关说明

文字叙述太麻烦了,此内容个人觉得上图可能大家更容易接受。 ——话不多说,直接上图。

PL/SQL语言的并发编程

标题:深入探讨PL/SQL语言中的并发编程 一、引言 在数据库应用程序开发中,多用户同时访问和操作数据的情况非常常见,这就要求数据库系统具备处理并发操作的能力。而Oracle数据库的PL/SQL语言,以其强大的并发处理能力,…

TestMAX/DFT Compiler:时序单元的类型、连接顺序和后DFT优化

相关阅读 TestMAX/DFT Compilerhttps://blog.csdn.net/weixin_45791458/category_12865937.html?spm1001.2014.3001.5482 时序单元的状态 未映射的时序单元(Unmapped Sequential Cell) 在Design Compiler读取了一个RTL设计后,Design Compiler内置的HDL Compiler工…

8086汇编(16位汇编)学习笔记06.串操作、流程转移指令

8086汇编(16位汇编)学习笔记06.串操作、流程转移指令-C/C基础-断点社区-专业的老牌游戏安全技术交流社区 - BpSend.net 串操作 源操作数使用si,默认段为DS,可段超越 目的操作数使用di,默认段为ES,不可段超越 串方向 串方向由D…

7-10 最长公共子序列

目录 题目描述 输入格式: 输出格式: 输入样例: 输出样例: 解题思路: 详细代码: 题目描述 给出 1~n 的两个排列 P1 和 P2,求它们的最长公共子序列。 n 在 5~1000 之间。 输入格式: 第一行是一个数 n 接下来两行,每行为 n 个数&…

TCP off-path exploits(又一个弄巧成拙的例子)

承接前面几篇文章的观点,本文用一个安全攻击的例子说明为了解决一个伤害很低的低概率问题,会引入多么大的麻烦,这次是可怕的被攻击 (⊙o⊙)。 TCP 端口号只有 16bit,序列号只有 32bit,这意味着在强大攻击算力面前&…

YOLO11改进-注意力-引入自调制特征聚合模块SMFA

本篇文章将介绍一个新的改进机制——SMFA(自调制特征聚合模块),并阐述如何将其应用于YOLOv11中,显著提升模型性能。随着深度学习在计算机视觉中的不断进展,目标检测任务也在快速发展。YOLO系列模型(You Onl…

【Spring MVC 核心概念】揭秘概念和整体架构

你有没有想过,当你在浏览器地址栏敲下一个 URL,按下回车,后台到底发生了什么?如果你用的是 Spring MVC,那这一切其实被精妙地拆解成了 三大块:Model、View 和 Controller,共同完成了这次的任务&…