Vue3中reactive响应式失效的问题

情景阐述

弹窗内部有一个挑选框,要通过请求接口获取挑选框下面可供选择的数据。

这是一个很简单的情境,我立刻有了自己的思路。如果实现搜索,数据较少可以直接用elementplus自带的filter。如果数据较多,就需要传val,在后台进行搜索,然后分页渲染。我选择的是前者,所以只需要把数据渲染上去就可以。

我的做法也很标准,我定义了一个option,因为获取的一定是个数组类型的数据,里面会有对象,对象中的属性是label。就类似于这种:

javascript 复制代码
const pingminOptions = reactive([
	{
		value: '',
		label: ''
	}
])

做好一切准备工作后,我就请求后端接口,拿到了一个新的数组。并把数组的值赋值给了pingminOptiions。

随后发现响应式出现问题,数据更改成功,但是没有办法实现在页面上渲染。(数据的单向绑定出现问题)

发现问题的过程

我和我的组长一起改了很久,因为前面的人的代码很乱,一开始都是用let来定义,所以看不出问题。但是一旦是const就出现报错。

const报错,说明这个引用型数据的存放位置都发生了变化。

前面我们定义了一个响应式数据pingminOptions,如果我们获取到的是data.records。那么:

javascript 复制代码
pingminOptions = data.records

这样的做法,会导致数据存放位置发生变化,而且原先的data.records并不是一个响应式数据,所以新定义的pingminOptions的响应式也失效了。

正确做法

正确的做法,我们可以给pingmingOptions中:

javascript 复制代码
const pingmingOptions = {
	option: []
}

定义一个option来存放数据。接着我们就可以把data.records的值给option。

为什么要这么做?

这么做的原因是,用reactive定义出来的数据,内部的对象或者数组也是响应式的,它是深层次的。所以我们不用担心pingmingOptions的响应式失效问题。

关于toRefs

在和组长交流的过程中,我们也曾一度考虑是不是没有用到toRefs的问题,于是也复习了toRefs。toRefs的作用,一般用于解构。

比如我的state对象中有很多数据,有state.a,state.b,state.c。

我在渲染页面的时候,每次都要带上state。非常的不方便。因此就可以toRefs(state),这样的话,相当于给a,b,c都变成了一个响应式的属性。那么我们在使用的时候,模板语法中可以直接把a,b,c写出来。这样就方便了书写。

需要注意的是,仅仅是在页面渲染的时候才能简写。

相关推荐
百万蹄蹄向前冲1 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5812 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路2 小时前
GeoTools 读取影像元数据
前端
ssshooter3 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
你的人类朋友3 小时前
【Node.js】什么是Node.js
javascript·后端·node.js
Jerry3 小时前
Jetpack Compose 中的状态
前端
dae bal4 小时前
关于RSA和AES加密
前端·vue.js
柳杉4 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog4 小时前
低端设备加载webp ANR
前端·算法
LKAI.5 小时前
传统方式部署(RuoYi-Cloud)微服务
java·linux·前端·后端·微服务·node.js·ruoyi