Question

在某些Vue组件通过热模块更换进行更新时，是否可以设置挂钩？

[HMR] App is up to date.

现在我想调用一些方法。

Answer 1

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

处置

添加一个处理程序，该处理程序在当前模块代码为更换。这应该用于删除您的任何持久资源声称或创造。如果要将状态转移到更新的模块，将其添加到给定的data parameter中。该对象将是可在module.hot.data after更新中获得。

removeDisposeHandler

删除通过dispose或addDisposeHandler添加的处理程序。

因此，我在dispose钩中添加了created，并在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)
});

我将其放入我的输入文件，并且每次热重装任何组件时都会调用它。

通过Vue和Webpack钩住HMR

2 个答案:

处置

removeDisposeHandler