vue3中使用reactive定义的变量响应式丢失问题(大坑!!!)

前言

        在Vue 3中,可以使用reactive函数将普通JavaScript对象转换为响应式对象,这样当对象的属性发生变化时,就会自动更新相应的UI。

但是请注意以下情况可能会丢失数据的响应式:

响应式丢失的情况:

1、对使用reactive 函数定义的变量直接赋值

<script setup>
​import { reactive } from 'vue';// 定义一个响应式变量
const data = reactive ({name:"",age:""
});// 请求接口
axios.get('/api/data').then(res => {// 直接赋值data = res.data;}).catch(err => console.log(err));​</script>

解决方法如下:

1、逐个属性进行赋值(不推荐!!!)
​<script setup>
​import { reactive } from 'vue';// 定义一个响应式变量
const data = reactive ({name:"",age:""
}});// 请求接口
axios.get('/api/data').then(res => {// 逐个属性赋值 不推荐data.name= res.data.name;data.age= res.data.age;}).catch(err => console.log(err));​</script>
2、改用ref(最简单) 简单数据类型使用ref()来进行定义。
​<script setup>
​import { ref } from 'vue';// 定义一个响应式变量
const data = ref ({name:"",age:""
});// 请求接口
axios.get('/api/data').then(res => {// 更新响应式变量的值data.value = res.data;}).catch(err => console.log(err));​</script>
​

        上述代码中,data变量通过ref函数定义为响应式变量,它的值是一个对象。当请求接口完成时,将响应的数据赋值给data.value,就会自动更新相应的UI。

3.直接在reactive中嵌套一层
​<script setup>
​import { reactive } from 'vue';// 定义一个响应式变量
const data = reactive ({dataObj:{name:"",age:""}
});// 请求接口
axios.get('/api/data').then(res => {// 嵌套一层 dataArrdata.dataObj= res.data;}).catch(err => console.log(err));​</script>

       使用reactive函数将data转换为响应式对象。这样在后续更新data对象的dataObj属性时,,就会自动更新相应的UI。

4、如果有ts类型限制可以写类(TS对reactive里对象进行限制)

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

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

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

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

2、解构赋值引起响应式数据丢失

在Vue中,使用reactive定义变量时,需要注意解构赋值的情况。如果在解构赋值中使用reactive定义的变量,会导致数据丢失,因为解构赋值会创建一个新的引用,而不是原始对象。因此,我们应该避免在解构赋值中使用reactive定义的变量,或者使用拷贝或者toRefs来避免数据丢失。

​<script setup>
import { reactive } from 'vue';// 定义一个响应式变量
const data = reactive ({name:"码农键盘上的梦",age:"99"
})// 解构了  响应式也丢了
let { name } = data; //解构赋值</script>

以下是几种解决方法:

1.直接访问reactive定义的变量,而不是使用解构赋值;
2.使用toRefs方法将响应式对象转化为普通对象的响应式属性;
​<script setup>
import { reactive, toRefs } from 'vue'// 定义一个响应式变量
const data = reactive ({name:"码农键盘上的梦",age:"99"
})// 使用toRefs解决
const { name, age} = toRefs(data)</script>

这种方法使用toRefs方法将响应式对象转化为普通对象的响应式属性是较为常用的方法。

3.在解构赋值时使用拷贝来避免数据丢失;
<script setup>
import { reactive, toRefs } from 'vue'// 定义一个响应式变量
const data = reactive ({name:"码农键盘上的梦",age:"99"
})// 使用拷贝解决
const { name:nameCopy , age:ageCopy } = { ...data }
console.log(nameCopy , ageCopy)</script>

3、原理:

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

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

附:官方文档对reactive的解读

reactive() API 有一些局限性:

  1. 有限的值类型:它只能用于对象类型 (对象、数组和如 MapSet 这样的集合类型)。它不能持有如 stringnumber 或 boolean 这样的原始类型。

  2. 不能替换整个对象:由于 Vue 的响应式跟踪是通过属性访问实现的,因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象,因为这样的话与第一个引用的响应性连接将丢失:

    let state = reactive({ count: 0 })// 上面的 ({ count: 0 }) 引用将不再被追踪
    // (响应性连接已丢失!)
    state = reactive({ count: 1 })
  3. 对解构操作不友好:当我们将响应式对象的原始类型属性解构为本地变量时,或者将该属性传递给函数时,我们将丢失响应性连接:

    js
    const state = reactive({ count: 0 })// 当解构时,count 已经与 state.count 断开连接
    let { count } = state
    // 不会影响原始的 state
    count++// 该函数接收到的是一个普通的数字
    // 并且无法追踪 state.count 的变化
    // 我们必须传入整个对象以保持响应性
    callSomeFunction(state.count)

由于这些限制,我们建议使用 ref() 作为声明响应式状态的主要 API。


注:未经允许,不可转载!

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

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

相关文章

被 Next.js 的环境变量给坑了一把...

最近在使用 Next.js 时遇到了一个问题&#xff0c;最后原因竟是 .env 取值问题&#xff0c;为这个问题花费了数小时的时间&#xff0c;希望看到这篇文章的朋友&#xff0c;如果遇到类似问题&#xff0c;不要重蹈覆辙吧。 起初报错内容如下所示&#xff1a; 一开始关注点在下面…

每天一道算法题(一)——在数组中找到目标值的之和的两个整数下标

文章目录 1、问题2、示例2、解决 1、问题 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里…

ubuntu提高 github下载速度

Github一般用于Git的远程仓库&#xff0c;由于服务器位于国外&#xff0c;国内访问速度比较慢&#xff0c;为了提高访问速度&#xff0c;决定绕过DNS域名解析。 获取Github的IP地址 按下ctrl&#xff0b;alt&#xff0b;T打开命令终端&#xff0c;输入&#xff1a; nslookup gi…

玩具、儿童用品、儿童服装上亚马逊TEMU平台CPC认证办理

CPC认证是Childrens Product Certificate的简称&#xff0c;即儿童产品证书。它是美国强制性法规CPSIA要求的一部分&#xff0c;该法规主要针对12岁及以下儿童使用的产品&#xff0c;如玩具、儿童用品、儿童服装等。 一、儿童小汽车CPC测试项目可能会因产品标准和法规的不同而…

android初集成flutter,遇到的问题

环境 studio版本&#xff1a;2022.1.1 flutter版本&#xff1a;2.8.0 电脑&#xff1a;mac flutter项目总是报错&#xff0c;编译不过 以 Resources Root 加载 记得设置dart&#xff1a;主工程和flutter项目都需要设置&#xff0c;否则不出现手机链接 下面这个样子就是好了&…

窗口管理工具 Mosaic mac中文版功能特点

MosAIc mac是一种窗口管理工具&#xff0c;可帮助您在计算机屏幕上有效地组织和管理多个应用程序窗口。它提供了一种直观的方式来调整和排列窗口&#xff0c;以最大化工作效率。 MosAIc mac窗口管理软件功能和特点 窗口布局&#xff1a;MosAIc允许您选择不同的窗口布局&#x…

抠某区域地图方法

1.打开阿里云数据可视化平台DataV.GeoAtlas地理小工具系列 2. 选择要抠出来的区域&#xff0c;右侧选择要下载的json文件&#xff0c;如红框所示 3. 打开下载的文件&#xff0c;内容全部复制。 4. 打开百度地图示例Examples - Apache ECharts 5. 如下图所示&#xff0c;将下…

数字化转型时代,商业智能BI到底是什么?

据国际数据公司&#xff08;IDC&#xff09;预测&#xff0c;2025年时中国产生的数据量预计将达48.6ZB&#xff0c;在全球中的比例为27.8%。商业智能BI这一专为企业提供服务的数据类解决方案&#xff0c;仅2021年上半年在中国商业智能BI市场规模就达到了3.2亿美元&#xff0c;商…

(二)什么是Vite——Vite 和 Webpack 区别(冷启动)

vite分享ppt&#xff0c;感兴趣的可以下载&#xff1a; ​​​​​​​Vite分享、原理介绍ppt 什么是vite系列目录&#xff1a; &#xff08;一&#xff09;什么是Vite——vite介绍与使用-CSDN博客 &#xff08;二&#xff09;什么是Vite——Vite 和 Webpack 区别&#xff0…

电源线虚接,导致信号线发烫

音频板的信号是经过隔直电容接到音频板的。

Nginx在实际使用中的常用基本配置

一、什么是Nginx Nginx 是开源的轻量级 Web 服务器、反向代理服务器&#xff0c;以及负载均衡器和 HTTP 缓存器。其特点是高并发&#xff0c;高性能和低内存。 Nginx 专为性能优化而开发&#xff0c;性能是其最重要的考量&#xff0c;实现上非常注重效率&#xff0c;能经受高负…

Linux应用开发基础知识——电阻屏和电容屏(八)

触摸屏分为电阻屏、 电容屏。电阻屏结构简单&#xff0c; 在以前很流行&#xff1b;电容屏支持 多点触摸&#xff0c;现在的手机基本都是使用电容屏。 注意&#xff1a;LCD、触摸屏不是一回事&#xff0c;LCD 是输出设备&#xff0c;触摸屏是输入设备。制作触摸 屏时特意把它的…

数据结构八种内部排序算法c++实现

文章目录 直接插入排序希尔排序冒泡排序快速排序选择排序堆排序归并排序桶排序 直接插入排序 vector<int> insertSort(vector<int> num) {int i, j, temp;for (i 1; i < num.size(); i){temp num[i];for (j i - 1; j > 0 && temp<num[j]; j-…

mysqldump常用操作示例/命令

以下是一些常用的mysqldump操作示例&#xff0c;以备份和还原MySQL数据库为例&#xff1a; 1. 备份单个数据库&#xff1a; mysqldump -u your_username -p your_password your_database > backup.sql将 your_username 替换为你的MySQL用户名&#xff0c;your_password 替…

反序列化漏洞(1), 原理, 实验, 魔术方法

反序列化漏洞(1), 原理, 实验, 魔术方法 一, 介绍 反序列化漏洞是一种存在于反序列化过程中的漏洞&#xff0c;它允许攻击者通过控制反序列化的数据来操纵序列化对象&#xff0c;并将有害数据传递给应用程序代码。 这种漏洞可能造成代码执行、获取系统权限等一系列不可控的后…

【ES6标准入门】JavaScript中的模块Module的加载实现:循环加载和Node加载,非常详细,建议收藏!!!

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;JavaScript进阶指南 &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要的是继…

IDEA写mybatis程序,java.io.IOException:Could not find resource mybatis-config.xml

找不到mybatis-config.xml 尝试maven idea:module&#xff0c;不是模块构造问题 尝试检验pom.xml&#xff0c;在编译模块添加了解析resources内容依旧不行 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.or…

chrome 浏览器个别字体模糊不清

特别是在虚拟机里&#xff0c;有些字体看不清&#xff0c;但是有些就可以&#xff0c;设置办法&#xff1a; chrome://settings/fonts 这里明显可以看到有些字体就是模糊的状态&#xff1a; 把这种模糊的字体换掉即可解决一部分问题。 另外&#xff0c;经过观察&#xff0c;…

【C++】数组中出现次数超过一半的数字

代码&#xff1a; class Solution { public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** * param numbers int整型vector * return int整型*/int MoreThanHalfNum_Solution(vector<int>& numbers) {int …

h5(react ts 适配)

一、新建项目并放在码云托管 1、新建项目&#xff1a;react ts h5 考虑到这些 用 create-react-app 脚手架来搭建项目。 首先&#xff0c;确保你已经安装了 Node.js。如果没有安装&#xff0c;请先从官方网站 https://nodejs.org/ 下载并安装 Node.js。打开命令行工具&#x…