vue組件值變化但不刷新強(qiáng)制組件刷新的問題

更新時間：2022年06月29日 11:16:22 作者：騰夢

這篇文章主要介紹了vue組件值變化但不刷新強(qiáng)制組件刷新的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

組件值變化但不刷新強(qiáng)制組件刷新

在調(diào)用組件的時候，如果數(shù)據(jù)中只是某個屬性變化（比如id）變化，在vue開發(fā)工具中看到變量值變化，但是組件上的數(shù)據(jù)就是不刷新

bug復(fù)現(xiàn)

引用組件

<bulletMenuVue v-else-if="sNode.type == 'cBomb'" :data="sNode" />

sNode數(shù)據(jù)結(jié)構(gòu)

{
? ? "id": "gun2m2c4",
? ? "label": "子彈4",
? ? "type": "cBomb",
? ? "data": {
? ? ? ? "angle": 50,
? ? ? ? "mwr": {
? ? ? ? ? ? "checked": false,
? ? ? ? ? ? "band": 50,
? ? ? ? ? ? "dbi": 50
? ? ? ? },
? ? ? ? "slr": {
? ? ? ? ? ? "checked": false,
? ? ? ? ? ? "length": 50,
? ? ? ? ? ? "power": 50,
? ? ? ? ? ? "facula": 50,
? ? ? ? ? ? "size": 50
? ? ? ? },
? ? ? ? "irDetector": {
? ? ? ? ? ? "checked": false,
? ? ? ? ? ? "band": 50,
? ? ? ? ? ? "dbi": 50
? ? ? ? },
? ? ? ? "mwd": {
? ? ? ? ? ? "checked": false,
? ? ? ? ? ? "band": 50,
? ? ? ? ? ? "direction": 50,
? ? ? ? ? ? "angle": 50
? ? ? ? }
? ? }
}

當(dāng)鼠標(biāo)點(diǎn)擊切換子彈過快時，會出現(xiàn)子組件不刷新的情況

解決

先看值有沒有return出去！如果沒有return，子組件也是不響應(yīng)的，watchEffect甚至監(jiān)聽不到

我們將提供一個key屬性，以便 Vue 知道特定的組件與特定的數(shù)據(jù)片段相關(guān)聯(lián)。如果key保持不變，則不會更改組件，但是如果key發(fā)生更改，Vue 就會知道應(yīng)該刪除舊組件并創(chuàng)建新組件。

我們可以將key分配給子組件，想重新渲染組件時，更新該key即可。這應(yīng)該是強(qiáng)制Vue重新渲染組件的最佳方法

具體一點(diǎn)

把子彈的id當(dāng)做key給組件，當(dāng)作為key的id發(fā)生變化時，Vue將知道它必須銷毀組件并創(chuàng)建一個新組件。我們得到的是一個子組件，它將重新初始化自身并“重置”其狀態(tài)。

<bulletMenuVue v-else-if="sNode.type == 'cBomb'" :data="sNode" :key="sNode.id" />

強(qiáng)制刷新vue組件

例如我有一個表格，每次點(diǎn)擊其中的一行彈出一個窗口，展示對應(yīng)的信息，彈窗如下

<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" top="0">
? ?<UserPage v-if="isShow" :userid="userid"/>
</el-dialog>

可見彈窗里面加載的其實是一個組件，組件通過判斷當(dāng)前點(diǎn)擊行的id來進(jìn)行不同數(shù)據(jù)的渲染

問題

發(fā)現(xiàn)，其實每次彈窗出來的數(shù)據(jù)都是第一次加載的數(shù)據(jù)，原因是根本沒有重新加載，而只是將dialog里面的組件進(jìn)行展示和隱藏而已

解決 – 強(qiáng)制刷新組件

給點(diǎn)擊時間里面加上強(qiáng)制刷新組件的代碼，如下

//methods中方法
handleCreate(row) {
? this.isShow = false//銷毀組件
? this.$nextTick(() => {
? ?? ?this.isShow = true//重建組件
? })
? //控制dialog的顯示
? this.dialogStatus = 'create'
? this.dialogFormVisible = true
? //傳參
? this.userid = row.approvalId.toString()
}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: