DEV Community

Discussion on: Vue3 event emitter

View post
Collapse
 
jackzhoumine profile image
jackzhoumine •

hello , I have a question, How to listener lifecycle hook in vue3 like vue2?
vue 2

  mounted() {
    const onResize = () => {
      console.log('onResize')
    }
    window.addEventListener('resize', onResize)
    // hook:liefHook
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', onResize)
    })
  }
Enter fullscreen mode Exit fullscreen mode

vue3 does not support this.$once anymore. I use npm to do this according to offical docs and lifecyle hook event.

onMounted(() => {
  console.log('vue3 mounted')
  function onResize() {
    console.log('onResize')
  }
  window.addEventListener('resize', onResize)
  event.once('vnode-before-unmount', () => {
    console.log('vnode-before-unmount')
    removeEventListener('resize', onResize)
  })
})
Enter fullscreen mode Exit fullscreen mode

event:

import emitter from 'tiny-emitter/instance'

export const event = {
  emit: (...args) => emitter.emit(...args),
  on: (...args) => emitter.on(...args),
  off: (...args) => emitter.off(...args),
  once: (...args) => emitter.once(...args),
}
Enter fullscreen mode Exit fullscreen mode

but event.once does not call when component umount.
Could u give me some advices? thinks

Collapse
 
deexter profile image
deexter • • Edited

Try onUnmount hook