情景闡述

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

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

我的做法也很標準，我定義了一個option，因為獲取的一定是個數(shù)組類型的數(shù)據(jù)，里面會有對象，對象中的屬性是label。就類似于這種：

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

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

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

發(fā)現(xiàn)問題的過程

我和我的組長一起改了很久，因為前面的人的代碼很亂，一開始都是用let來定義，所以看不出問題。但是一旦是const就出現(xiàn)報錯。

const報錯，說明這個引用型數(shù)據(jù)的存放位置都發(fā)生了變化。

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

pingminOptions = data.records

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

正確做法

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

const pingmingOptions = {
	option: []
}

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

為什么要這么做？

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

關(guān)于toRefs

在和組長交流的過程中，我們也曾一度考慮是不是沒有用到toRefs的問題，于是也復習了toRefs。toRefs的作用，一般用于解構(gòu)。

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

我在渲染頁面的時候，每次都要帶上state。非常的不方便。因此就可以toRefs(state)，這樣的話，相當于給a，b，c都變成了一個響應式的屬性。那么我們在使用的時候，模板語法中可以直接把a，b，c寫出來。這樣就方便了書寫。

需要注意的是，僅僅是在頁面渲染的時候才能簡寫。

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

最新評論