问HMR与Vue和webpack的钩子

EN

通过对webpack的搜索，我发现了两种方法：dispose和removeDisposeHandler。

处置

添加一个处理程序，该处理程序在替换当前模块代码时执行。这应该用于删除您已声明或创建的任何持久资源。如果您希望将状态转移到更新后的模块，请将其添加到给定的data parameter中。此对象将在module.hot.data after更新时可用。

removeDisposeHandler

删除通过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应用程序中测试了它，一切都运行得很好:它在这个模块发生更改时调用，而在另一个模块更改时不调用。

@Javas，谢谢提示。我正在寻找的解决方案是：

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

我把它放到了我的入口文件中，如果有任何组件被热重新加载，它就会在每次调用。