vue 中监听生命周期事件

vue2 提供了一些生命周期事件的方式，在组件销毁后触发一个事件，父组件可监听到该事件，然后执行某些操作。

命名为 hook:hookName ，前面的 hook: 是固定写法，比如 hook:mounted 、 hook:beforeDestroy 。

常见的添加自定义事件的写法

{
   
  mounted() {
   
      this.onResize = () => {
   
        console.log('onResize')
      }
      window.addEventListener('resize', this.onResize)
    },
    beforeDestroy() {
   
      window.removeEventListener('resize', this.onResize)
    }
}

这种写法存在两个小问题：

1. 添加了额外的变量onResize，感觉有点多余；
2. 监听 resize 的逻辑分散在不同的生命周期中，不好维护。

使用监听生命周期事件的方式优化：

{
   

  mounted() {
   
    const onResize = () => {
   
      console.log('onResize')
    }
    window.addEventListener('resize', onResize)
    // hook:lifeHook $once 只执行一次
    this.$once('hook:beforeDestroy', () => {
   
      window.removeEventListener('resize', onResize)
    })
  }
}

凡在销毁时执行的操作，都可这样优化。

有人说方式1的问题不大，也没有优化多少，似乎没有多少用。

再看一个场景：

希望在子组件挂载时通知父组件

通常的写法：

// SonComponent.vue
{
   
  mounted() {
   
    this.$emit('mounted')
  }
}

在父组件中监听子组件触发的事件：

<template>
  <div>
    <SonComponent @mounted="onMounted" />
  </div>
</template>

<script>
  export default {
     
    methods: {
     
      onMounted() {
     
        console.log('onMounted')
      }
    }
  }
</script>

问题解决了，但是 SonComponent 是自己写的组件，具有完全的控制权，如果是第三方组件呢？

上面的方法就无招了。

生命周期事件可以解决这个问题：

在模板上监听组件生命周期