@hook-监听子组件生命周期（vue）

vue-hooks是简化组件定义、复用状态逻辑的一种最新尝试，且结合 Vue 实例的特点提供了适用的 Hooks，hooks.js中的this为当前vue实例

1.@hook的使用

在子组件用@hook：+对应的子组件生命周期，再给定一个方法如下的‘moutedEvent’，那我们就能把我们的业务逻辑写在方法里面即可。

<template>
  <div>
    <Chilid @hook:mouted="moutedEvent"></Chilid>
  </div>
</template>
<script>
import Chilid from "./chilid"
export default {
  components:{
    Chilid:chilid
  },
  data() {
    return {
    };
  },
  created() {
  },
  methods:{
    moutedEvent(){
      console.log("父组件监听到mouted钩子函数")
    }
  }
};
</script>

2.@hook的使用场景

（1）：清除定时器

<script>
  export default {
    mounted() {
      const timer = setInterval(() => { ... }, 1000);
      this.$once('hook:beforeDestroy', () => clearInterval(timer);)
    }
  };
</script>

（2）当生命周期函数内容很多，代码很分散，不好维护，可以用hook

<template>
  <div>
    <Chilid  
    @hook:mounted="overMask = false"
    @hook:beforeUpdated="overMask = true"
    @hook:updated="overMask = false"
    ></Chilid>
  </div>
</template>