使用 Vue 和 webpack 鈎住 HMR

Question

當某些 Vue 組件通過熱模塊替換更新時，是否有設置掛鈎的選項？

[HMR] App is up to date.

現在我想調用一些方法。

Answer 1

通過 webpack HMR 搜索我發現了兩種方法： dispose和removeDisposeHandler 。

處置

添加在替換當前模塊代碼時執行的處理程序。 這應該用於刪除您聲明或創建的任何持久資源。 如果要將狀態傳輸到更新的模塊，請將其添加到給定的data parameter 。 更新module.hot.data after ，此對象將在module.hot.data after可用。

移除處理程序

刪除通過 dispose 或addDisposeHandler添加的處理程序。

所以我在created鈎子中添加了dispose並在destroyed鈎子中刪除了它，如下所示：

export default {
  methods: {
    callback(data) {
      console.log(data)
    },
  },
  created() {
    if (module.hot) {
      module.hot.dispose(this.callback)
    } 
  },
  destroyed() {
    if (module.hot) {
      module.hot.removeDisposeHandler(this.callback)
    }
  },
}

我已經在我的 Vue CLI 應用程序中對其進行了測試，一切正常：它在此模塊發生更改時調用，但在另一個模塊更改時不調用。

Answer 2

@Javas，感謝提示。 我正在尋找的解決方案是：

module.hot.addStatusHandler(status => {
    console.log('module hot status', status)
});

我將它放入我的入口文件中，如果任何組件被熱重載，則每次都會調用它。