hook的应用场景

vue hook应用场景:
实现了mixins的功能，并且解决了mixins的两个问题
允许相互传递状态
明确指出了逻辑来自哪里
使用 Hooks，函数的返回值会记录消费的值。
vue-hooks是简化组件定义、复用状态逻辑的一种最新尝试，且结合 Vue 实例的特点提供了适用的 Hooks
hooks.js中的this为当前vue实例

react-hooks
hooks只能出现在函数作用域的顶级，不能出现在条件语句、循环语句中、嵌套函数中。

一、父组件监测其他组件的生命周期
<Child @hook:created=“updateChange” @hook:updated=“updateChange”>{{msg}}

二、清除定时器比较好的方法，用hook：

export default{
  methods:{
    fun1(){
      const timer = setInterval(()=>{
      	//需要做的事情
         console.log(11111);
      },1000);
      this.$once('hook:beforeDestory',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}


下面的用法有2个问题
1、vue实例中需要有这个定时器的实例，感觉有点多余;
2、 创建的定时器代码和销毁定时器的代码没有放在一起，通常很容易忘记去清理这个定时器，不容易维护;
export default{
  data(){
    timer:null  
  },
  this.timer = setInterval(()=>{
  //需要做的事情
},1000)，
beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}

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

<script>
export default {
  created() {
    xxxx.init()
    this.$once('hook:mounted', () => {
      xxxx.start()
    })
    this.$on('hook:mounted', () => {
      xxxx.start()
    })
    this.$on('hook:updated', () => {
      xxxx.update()
    })
    this.$once('hook:beforeDestroy', () => {
      xxxx.destroy()
    })
  }
}
</script>