vue組件值變化但不刷新強制組件刷新的問題

Posted on by

組件值變化但不刷新強制組件刷新

在調用組件的時候，如果數據中隻是某個屬性變化（比如id）變化，在vue開發工具中看到變量值變化，但是組件上的數據就是不刷新

bug復現

引用組件

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

sNode數據結構

{
    "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
        }
    }
}

當鼠標點擊切換子彈過快時，會出現子組件不刷新的情況

解決

先看值有沒有return出去！如果沒有return，子組件也是不響應的，watchEffect甚至監聽不到

我們將提供一個key屬性，以便 Vue 知道特定的組件與特定的數據片段相關聯。如果key保持不變，則不會更改組件，但是如果key發生更改，Vue 就會知道應該刪除舊組件並創建新組件。

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

具體一點

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

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

強制刷新vue組件

例如我有一個表格，每次點擊其中的一行彈出一個窗口，展示對應的信息，彈窗如下

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

可見彈窗裡面加載的其實是一個組件，組件通過判斷當前點擊行的id來進行不同數據的渲染

問題

發現，其實每次彈窗出來的數據都是第一次加載的數據，原因是根本沒有重新加載，而隻是將dialog裡面的組件進行展示和隱藏而已

解決 – 強制刷新組件

給點擊時間裡面加上強制刷新組件的代碼，如下

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

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：