javascript - 使用 Vue 和 webpack Hook HMR

Question

当某些 Vue 组件更新为模块热替换时，是否有设置 Hook 的选项？

[HMR] App is up to date.

现在我想调用一些方法。

Answer 1

通过 webpack HMR 搜索我找到了两种方法:dispose和 removeDisposeHandler .

处置

Add a handler which is executed when the current module code is replaced. This should be used to remove any persistent resource you have claimed or created. If you want to transfer state to the updated module, add it to the given data parameter. This object will be available at module.hot.data after the update.

移除处理程序

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

所以我在 created 钩子(Hook)中添加了 dispose 并在 destroyed 钩子(Hook)中删除了它，如下所示:

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 应用程序中对其进行了测试，并且一切正常:它会在这个模块发生更改时调用，但不会在另一个模块发生更改时调用。