Vue之hook使用

记录一下vue中hook的两点使用

1、在同一个组件中

例如：在 mounted 中添加一个监听需要在 beforeDistroy 中移除这个监听，考虑到某些原因你不想再写个 beforeDistroy 去实现，这时候绿巨人 hook 就该登场了！

mounted(){
    window.addEventListener('online',this.handleOnline)
    this.$once('hook:beforeDestroy',function() {
      window.removeEventListener('online',this.handleOnline)
    })
  }

就是你在任意地方用 this.on/once('hook:生命周期', callback)，就可以监听到生命周期的变化了。

2、在父组件监听子组件的生命周期方法

如果你站在父组件里想在子组件的 mounted 方法里边做一些事情你会怎么办呢？

//父组件中这样写
<rl-child
  :value="40"
  @childMounted="handleChildMounted"
/>
// 子组件中这样写
mounted () {
  this.$emit('childMounted')
},

这样确实可以实现，那有没有更好的方式呢？绿巨人说有！

//父组件中这样写
<rl-child
  :value="40"
  @hook:mounted="handleChildMounted"
/>
 
// 子组件中不用写东西
mounted () {
   
},

这样就实现了！是不是还简洁一点呢？

3、处理组件内定时器的步骤

通常我们一般都是这样操作的：

<script>
export default {
  mounted() {
    this.timer = setInterval(() => { ... }, 1000);
  }
  beforeDestroy() {
    clearInterval(this.timer);
  },
}
</script>

但是其实更好的做法是：

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

设想一个场景 如果我们需要在数据渲染到页面的之前让页面 loading。mounted 之后停止 loading。beforeUpdata 时开始 loading。updatad 之后停止 loading。

最简单的方法就是改写组件的生命周期函数，使其在 mounted/beforeUpdata /updatad 时通知父组件显示或者隐藏 loading。

这样做显示不好，因为侵入了自组件的逻辑，增加的逻辑也和组件本身的功能好不关联。最好的办法就是使用 v-on="hook:xxx" 的方式：
```html
    <v-chart
      @hook:mounted="loading = false"
      @hook:beforeUpdated="loading = true"
      @hook:updated="loading = false"
      :data="data"
    />

这样，就实现了对子组件生命周期的监听。对任意的组件都有效果，包括引入的第三方组件。