vue強(qiáng)制組件刷新問題如何解決

這篇文章主要介紹“vue強(qiáng)制組件刷新問題如何解決”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“vue強(qiáng)制組件刷新問題如何解決”文章能幫助大家解決問題。

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

在調(diào)用組件的時(shí)候，如果數(shù)據(jù)中只是某個(gè)屬性變化（比如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)擊切換子彈過快時(shí)，會(huì)出現(xiàn)子組件不刷新的情況

解決

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

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

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

具體一點(diǎn)

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

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

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

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

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

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

問題

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

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

給點(diǎn)擊時(shí)間里面加上強(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()
}

關(guān)于“vue強(qiáng)制組件刷新問題如何解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。