情景闡述
彈窗內(nèi)部有一個挑選框，要通過請求接口獲取挑選框下面可供選擇的數(shù)據(jù)。
這是一個很簡單的情境，我立刻有了自己的思路。如果實現(xiàn)搜索，數(shù)據(jù)較少可以直接用elementplus自帶的filter。如果數(shù)據(jù)較多，就需要傳val，在后臺進(jìn)行搜索，然后分頁渲染。我選擇的是前者，所以只需要把數(shù)據(jù)渲染上去就可以。
我的做法也很標(biāo)準(zhǔn)，我定義了一個option，因為獲取的一定是個數(shù)組類型的數(shù)據(jù)，里面會有對象，對象中的屬性是label。就類似于這種：
const pingminOptions = reactive([
{
value: '',
label: ''
}
])
做好一切準(zhǔn)備工作后，我就請求后端接口，拿到了一個新的數(shù)組。并把數(shù)組的值賦值給了pingminOptiions。
隨后發(fā)現(xiàn)響應(yīng)式出現(xiàn)問題，數(shù)據(jù)更改成功，但是沒有辦法實現(xiàn)在頁面上渲染。（數(shù)據(jù)的單向綁定出現(xiàn)問題）
發(fā)現(xiàn)問題的過程
我和我的組長一起改了很久，因為前面的人的代碼很亂，一開始都是用let來定義，所以看不出問題。但是一旦是const就出現(xiàn)報錯。
const報錯，說明這個引用型數(shù)據(jù)的存放位置都發(fā)生了變化。
前面我們定義了一個響應(yīng)式數(shù)據(jù)pingminOptions，如果我們獲取到的是data.records。那么：
pingminOptions = data.records
這樣的做法，會導(dǎo)致數(shù)據(jù)存放位置發(fā)生變化，而且原先的data.records并不是一個響應(yīng)式數(shù)據(jù)，所以新定義的pingminOptions的響應(yīng)式也失效了。
正確做法
正確的做法，我們可以給pingmingOptions中：
const pingmingOptions = {
option: []
}
定義一個option來存放數(shù)據(jù)。接著我們就可以把data.records的值給option。
為什么要這么做？
這么做的原因是，用reactive定義出來的數(shù)據(jù)，內(nèi)部的對象或者數(shù)組也是響應(yīng)式的，它是深層次的。所以我們不用擔(dān)心pingmingOptions的響應(yīng)式失效問題。
關(guān)于toRefs
在和組長交流的過程中，我們也曾一度考慮是不是沒有用到toRefs的問題，于是也復(fù)習(xí)了toRefs。toRefs的作用，一般用于解構(gòu)。
比如我的state對象中有很多數(shù)據(jù)，有state.a，state.b，state.c。
我在渲染頁面的時候，每次都要帶上state。非常的不方便。因此就可以toRefs(state)，這樣的話，相當(dāng)于給a，b，c都變成了一個響應(yīng)式的屬性。那么我們在使用的時候，模板語法中可以直接把a，b，c寫出來。這樣就方便了書寫。文章來源：http://www.zghlxwxcb.cn/news/detail-684227.html
需要注意的是，僅僅是在頁面渲染的時候才能簡寫。文章來源地址http://www.zghlxwxcb.cn/news/detail-684227.html
到了這里，關(guān)于Vue3中reactive響應(yīng)式失效的問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
