使用 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)
});

我将它放入我的入口文件中，如果任何组件被热重载，则每次都会调用它。