避大坑!Vue3中reactive丢失响应式的问题

在vue3中,我们定义响应式数据无非是ref和reactive。
但是有的小伙伴会踩雷!导致定义的响应式丢失的问题。

reactive丢失响应式的情况1(直接赋值)


场景:
1.你定义了一个数据:let data=reactive({name:"",age:""
})
2.然后你请求了接口,赋值给data
let res=await getUserApi();  //请求接口
data=res.data;                     //将返回的结果赋值给data

大错特错!!!

reactive丢失响应式的情况2(解构赋值)


场景:
1.你定义了一个数据:let data=reactive({name:"",age:""
})
2.然后你解构了
let {name}=data; //解构赋值

大错特错!!!

了解响应式

1.ref 定义数据(包括对象)时,都会变成 RefImpl(Ref 引用对象) 类的实例,无论是修改还是重新赋值都会调用 setter,都会经过 reactive 方法处理为响应式对象。

2.但是 reactive 定义数据(必须是对象),是直接调用 reactive 方法处理成响应式对象。如果重新赋值,就会丢失原来响应式对象的引用地址,变成一个新的引用地址,这个新的引用地址指向的对象是没有经过 reactive 方法处理的,所以是一个普通对象,而不是响应式对象。解构同理。

避坑办法:

  1. 避开直接赋值和结构,reactive直接包裹一个对象。


let data=reactive({userData:{}        //里面定义一个对象,这样赋值就不会丢失响应式了。
})//获取接口数据
let res=await getUserApi();  //请求接口
data.userData=res.data;      //将返回的结果赋值给data
  1. 简单数据类型使用ref()来进行定义。

拔高:TS对reactive里对象进行限制

上面那种情况是没在TS限制的情况下我们解决的,但是有TS用户就有疑问了,这样我在reactive内部再定义一个对象,就失去了对userData的类型限制了,怎么办呢?

答案:写类!!!!!!!!!!!!!!!!!!!

下面我们就来研究一下:

1.我们最开始会可能这样对data加上类型限制:


interface dataRule{name:string,age:number
}//定义数据
let data:dataRule=reactive({name:"",age:""
})//但是,当获取接口的时候
let res=await getUserApi();  //请求接口
//data=res.data;              //我们已经知道不能这样写了,会丢失响应式。(xxx达咩)
//2.这时聪明的你可能会这样
data.name=res.data.name;
data.age=res.data.age;//PS:
//问题一:赋值太麻烦
//这样确实可以不损坏响应式,但是如果我说你这里面不仅仅有name和age呢,而是有很多很多,那咋办?//问题二:无法对userData做类型限制
//你可能又想这样:
let data=reactive({userData:{}  
})
这样写,我们怎么能对userData做类型限制呢?

实现:分开写类!!!!!!!!!!!(重点来啦)

1.单独拿出来一个ts文件,比如user.ts


//1.定义限制userData的接口
export interface dataRule{name:string,age:number
}//写类
export class data{//定义userData并且做TS限制和赋初始值userData:dataRule={name:"",age:""}
}

在对应的.vue文件中引入该类。


//1.引入刚写好ts类文件
import {dataRule,data} from "@/type/user.ts"//2.重点来了,我实例化出来data,然后用一个变量User接收。
let User=reactive(new data());/*
//实例化出来以后相当于这样的结构:
User={userData:{name:"",age:""}
}
*///3.我们调用接口
//获取接口数据
let res=await getUserApi();  //请求接口
User.userData=res.data;      //将返回的结果赋值给data,这样也不会丢失响应式,并且userData也受了TS的限制。

结语:

在前端的道路上,我们就是要不断地保持学习,然后逐渐的变强大,沉淀自己,我们顶峰相见。

--Yan

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

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

相关文章

高中数学:计数原理-二项式定理

文章目录 一、二项式定理与通项公式二、二项式系数的性质 一、二项式定理与通项公式 我们先来看完全平方公式 二、二项式系数的性质

Linux学习笔记14 了解磁盘:何为HDD,SSD?sata?PCIE?分区,MBR,GPT (上)

前文有学习文件系统的概念。介绍了Linux组织文件的方式和文件的分类。 但是最初的时候,最先有的并不是文件系统。而是磁盘。 要我说,最关键的那句话就是:分区存在自己的文件系统。而磁盘存在自己的分区。 磁盘 我们一般指的是在linux中以…

刷题计划day26 回溯(五)回溯止【N 皇后】【解数独】

⚡刷题计划day26 回溯(五)继续,回溯最后一个专题,今天的是hard题,也是比较经典的题型,可以点个免费的赞哦~ 往期可看专栏,关注不迷路, 您的支持是我的最大动力🌹~ 目录…

Next.js系统性教学:深入理解部分预渲染与边缘计算

更多有关Next.js教程,请查阅: 【目录】Next.js 独立开发系列教程-CSDN博客 目录 更多有关Next.js教程,请查阅: 1. 部分预渲染(Partial Prerendering) 1.1 什么是部分预渲染? 1.1.1 部分预渲…

Ubuntu 20.04安装rsync 3.2.7

前言 Ubuntu 20.04的apt中不支持rsync 3.2.0的安装,因此需要手动编译安装,记录下过程 ~$ apt policy rsync rsync:已安装:(无)候选: 3.1.2-2.1ubuntu1.6版本列表:3.1.3-8ubuntu0.7 -1100 /var/lib/dpkg/status下载所…

UE5基本数据类型

bool: 表示布尔值,只有两个取值:true 或 false,用于表示逻辑条件。int8: 表示 8 位的有符号整数,范围是 −128−128 到 127127。uint8: 表示 8 位的无符号整数,范围是 00 到 255255。int16: 表示 16 位的有符号整数&am…

Linux中的rpm命令

rpm(Red Hat Package Manager)是一个用于管理基于 RPM 的 Linux 发行版(如 Red Hat、CentOS、Fedora 等)软件包的命令行工具。你可以使用 rpm 命令来查询、安装、卸载、升级和验证 RPM 软件包。 ### 常用的 rpm 命令:…

【C++游戏程序】easyX图形库还原游戏《贪吃蛇大作战》(三)

承接上一篇文章:【C游戏程序】easyX图形库还原游戏《贪吃蛇大作战》(二),我们这次来补充一些游戏细节,以及增加吃食物加长角色长度等设定玩法,也是本游戏的最后一篇文章。 一.玩家边界检测 首先是用来检测…

linux的vdagent框架设计

1、vdagent Linux 的 spice 客户代理由两部分组成,一个系统范围的守护进程 spice-vdagentd 和一个 X11 会话代理 spice-vdagent,每个 X11 会话有一个。spice-vdagentd 通过 Sys-V initscript 或 systemd 单元启动。 如下图:spice-vdagent&a…

docker修改并迁移存储至数据盘

文章目录 前言一、操作步骤(需要root权限)1. 查看磁盘占用,查看当前docker目录占用的空间2. 查看正在运行的容器,并停止容器及服务3. 拷贝数据、修改配置(关键步骤)4. 加载配置,启动服务及容器 …

证明网络中的流形成一个凸集

证明网络中的流形成一个凸集 步骤1:定义和符号步骤2:线性组合步骤3:验证容量限制步骤4:验证流量守恒结论示例代码(C语言) 在网络流理论中,一个流 f f f 是定义在网络图的边集上的一种函数&…

vscode(一)安装(ubuntu20.04)

1、更新软件包列表 sudo apt update2、安装依赖包 sudo apt install software-properties-common apt-transport-https wget3、导入Microsoft GPG密钥 wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -4、向系统添加VSCode存储库 sudo…

阿里云轻量应用服务器开放端口,图文教程分享

阿里云轻量应用服务器如何开放端口?在轻量服务器管理控制台的防火墙中添加规则即可开通端口,开通80端口就填80,开通443就填443端口,开通3306端口就填3306。阿里云百科网aliyunbaike.com整理阿里云轻量应用服务器端口号开通图文教程…

自然三次样条插值推导笔记

问题情境 假设我们有一组数据点(称为控制点): x 0 , x 1 , x 2 , … , x n x_0, x_1, x_2, \ldots, x_n x0​,x1​,x2​,…,xn​ 这些点是已知的,表示我们要拟合的曲线在等距离参数点(比如参数取为0,1,2,…,n&#x…

如何在Ubuntu中利用repo和git地址下载获取imx6ull的BSP

01-设置git的用户名和邮箱 git config --global user.name "suwenhao" git config --global user.email "2487872782qq.com"这里不设置的话后面在第5步的repo配置中还是会要求输入,而且以后进行相关操作都要输入,不妨现在就进行配置…

C++设计模式之外观模式

动机 下图中左边方案的问题在于组件的客户和组件中各种复杂的子系统有了过多的耦合,随着外部客户程序和各子系统的演化,这种过多的耦合面临很多变化的挑战。 如何简化外部客户程序和系统间的交互接口?如何将外部客户程序的演化和内部子系统…

13.高级GLSL

高级GLSL 1.GLSL的内建变量 着色器都是最简化的,如果需要当前着色器以外地方的数据的话,我们必须要将数据传进来。我们已经学会使用顶点属性、uniform和采样器来完成这一任务了。然而,除此之外,GLSL还定义了另外几个以gl_为前缀…

【bug】python pandas KeyError: ‘index’

【bug】python pandas KeyError: index’ 环境 pandas 2.2.3问题详情 代码 import pandas as pd# 创建一个示例 DataFrame data {id: [1, 2, 3],name: [Alice, Bob, Charlie],age: [100, 200, 300] } df pd.DataFrame(data) # 这里的reset_index()用于将 Seri…

使用数据层进行数据生命周期管理

作者:来自 Elastic Stef Nestor Elasticsearch 7.10 使配置数据生命周期变得不再那么复杂。在这篇博文中,我将介绍一些变化、如何使用它们以及一些最佳实践。 数据生命周期可以包含很多阶段,因此我们将涉及: 将集群划分为层&…

Jenkins环境一站式教程:从安装到配置,打造高效CI/CD流水线环境-Ubuntu 22.04.5 环境离线安装配置 Jenkins 2.479.1

文章目录 Jenkins环境一站式教程:从安装到配置,打造高效CI/CD流水线环境-Ubuntu 22.04.5 环境离线安装配置 Jenkins 2.479.1一、环境准备1.1 机器规划1.2 环境配置1.2.1 设置主机名1.2.2 停止和禁用防火墙1.2.3 更新系统 二、安装配置Jenkins2.1 安装JDK…