Vue3中reactive响应式失效的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3中reactive响应式失效的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

情景阐述

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

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

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

const pingminOptions = reactive([
	{
		value: '',
		label: ''
	}
])

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

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

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

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

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

pingminOptions = data.records

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

正确的做法，我们可以给pingmingOptions中：

const pingmingOptions = {
	option: []
}

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

为什么要这么做？

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

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

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

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

需要注意的是，仅仅是在页面渲染的时候才能简写。文章来源地址https://www.toymoban.com/news/detail-684227.html

到了这里，关于Vue3中reactive响应式失效的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！