javascript - 通过Vue和Webpack钩住HMR

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

[HMR] App is up to date.

现在，我想调用一些方法。

最佳答案

通过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应用程序中对其进行了测试，并且一切运行正常：当确切地更改了此模块时，它会调用，而在另一个模块时，它不会调用。