使用 Vue 和 webpack 钩住 HMR

Question

Is there any option to set up hook when some of Vue component were updated with hot module replacement?

[HMR] App is up to date.

And now I would like to call some method.

Answer 1

Searching through webpack HMR I have found two methods: dispose and removeDisposeHandler .

dispose

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.

removeDisposeHandler

Remove the handler added via dispose or addDisposeHandler .

So I added dispose in created hook and removed it in destroyed hook like this:

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)
    }
  },
}

I have tested it in my Vue CLI app and everything works perfectly: it invokes when exactly this module is changed, but does not when another.

Answer 2

@Javas, thanks for hint. Solution that I'm looking for is:

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

I placed it into my entry file and it's called each time if any of components are hot-reloaded.