快捷導(dǎo)航

Vue3中reactive響應(yīng)式失效的解決方案

更新時(shí)間：2023年08月29日 09:31:17 作者：巧克力小貓?jiān)?

這篇文章主要給大家分享Vue3中reactive響應(yīng)式失效的問(wèn)題的解決方法,文中有詳細(xì)的解決方案供大家參考,如果又遇到一樣問(wèn)題的同學(xué),可以借鑒閱讀本文

情景闡述

彈窗內(nèi)部有一個(gè)挑選框，要通過(guò)請(qǐng)求接口獲取挑選框下面可供選擇的數(shù)據(jù)。

這是一個(gè)很簡(jiǎn)單的情境，我立刻有了自己的思路。如果實(shí)現(xiàn)搜索，數(shù)據(jù)較少可以直接用elementplus自帶的filter。如果數(shù)據(jù)較多，就需要傳val，在后臺(tái)進(jìn)行搜索，然后分頁(yè)渲染。我選擇的是前者，所以只需要把數(shù)據(jù)渲染上去就可以。

我的做法也很標(biāo)準(zhǔn)，我定義了一個(gè)option，因?yàn)楂@取的一定是個(gè)數(shù)組類型的數(shù)據(jù)，里面會(huì)有對(duì)象，對(duì)象中的屬性是label。就類似于這種：

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

做好一切準(zhǔn)備工作后，我就請(qǐng)求后端接口，拿到了一個(gè)新的數(shù)組。并把數(shù)組的值賦值給了pingminOptiions。

隨后發(fā)現(xiàn)響應(yīng)式出現(xiàn)問(wèn)題，數(shù)據(jù)更改成功，但是沒有辦法實(shí)現(xiàn)在頁(yè)面上渲染。（數(shù)據(jù)的單向綁定出現(xiàn)問(wèn)題）

發(fā)現(xiàn)問(wèn)題的過(guò)程

我和我的組長(zhǎng)一起改了很久，因?yàn)榍懊娴娜说拇a很亂，一開始都是用let來(lái)定義，所以看不出問(wèn)題。但是一旦是const就出現(xiàn)報(bào)錯(cuò)。

const報(bào)錯(cuò)，說(shuō)明這個(gè)引用型數(shù)據(jù)的存放位置都發(fā)生了變化。

前面我們定義了一個(gè)響應(yīng)式數(shù)據(jù)pingminOptions，如果我們獲取到的是data.records。那么：

pingminOptions = data.records

這樣的做法，會(huì)導(dǎo)致數(shù)據(jù)存放位置發(fā)生變化，而且原先的data.records并不是一個(gè)響應(yīng)式數(shù)據(jù)，所以新定義的pingminOptions的響應(yīng)式也失效了。

正確做法

正確的做法，我們可以給pingmingOptions中：

const pingmingOptions = {
	option: []
}

定義一個(gè)option來(lái)存放數(shù)據(jù)。接著我們就可以把data.records的值給option。

為什么要這么做？

這么做的原因是，用reactive定義出來(lái)的數(shù)據(jù)，內(nèi)部的對(duì)象或者數(shù)組也是響應(yīng)式的，它是深層次的。所以我們不用擔(dān)心pingmingOptions的響應(yīng)式失效問(wèn)題。

關(guān)于toRefs

在和組長(zhǎng)交流的過(guò)程中，我們也曾一度考慮是不是沒有用到toRefs的問(wèn)題，于是也復(fù)習(xí)了toRefs。toRefs的作用，一般用于解構(gòu)。

比如我的state對(duì)象中有很多數(shù)據(jù)，有state.a，state.b，state.c。

我在渲染頁(yè)面的時(shí)候，每次都要帶上state。非常的不方便。因此就可以toRefs(state)，這樣的話，相當(dāng)于給a，b，c都變成了一個(gè)響應(yīng)式的屬性。那么我們?cè)谑褂玫臅r(shí)候，模板語(yǔ)法中可以直接把a(bǔ)，b，c寫出來(lái)。這樣就方便了書寫。

需要注意的是，僅僅是在頁(yè)面渲染的時(shí)候才能簡(jiǎn)寫。

到此這篇關(guān)于Vue3中reactive響應(yīng)式失效的解決方案的文章就介紹到這了,更多相關(guān)Vue3 reactive響應(yīng)式失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: