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写出来。这样就方便了书写。

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

相关推荐
风雨兼程^_^7 分钟前
Nuxt3项目的SEO优化(robots.txt,页面tdk,伪静态.html,sitemap.xml动态生成等)
前端·seo·nuxt3·服务端渲染ssr
佬乔9 分钟前
xml中配置AOP织入
java·服务器·前端
Eugene__Chen10 分钟前
JavaWeb开发基础知识-XML和JSON
java·开发语言·前端
谢尔登14 分钟前
为 IDEA 设置管理员权限
前端·express
Kx…………29 分钟前
Uni-app入门到精通:uni-app的基础组件
前端·css·学习·uni-app·html
巴巴博一32 分钟前
keep-alive缓存
前端·javascript·vue.js·缓存·typescript
Tipriest_41 分钟前
【前端扫盲】postman介绍及使用
前端·测试工具·postman
wuaro1 小时前
JS的深浅拷贝
前端·javascript·html
CHPCWWHSU1 小时前
vulkanscenegraph显示倾斜模型(5.6)-vsg::RenderGraph的创建
开发语言·javascript·ecmascript
苹果酱05672 小时前
SpringCloud第二篇:注册中心Eureka
java·vue.js·spring boot·mysql·课程设计