hook可以让我们对生命周期各阶段的方法编写的更加整齐，增加了可读性和维护性，使用Vue3的同学，对于hook已经手到擒来，而使用Vue2的同学，很多人并没有使用过

其实在Vue2中已经有了hook的使用，不过大部分同学还是习惯进行生命周期分开来写，例如下面这样：

<script>
export default {
  mounted() {
    xxxx()
  },
  updated() {
    xxxx()
  },
  created() {
    // 执行一大堆的其他操作
  },
  beforeDestroy() {
    // 执行一大堆的其他操作
  },
  methods: {
    a () {
      console.log(111)
    }
    // 其他一堆方法
  }
}
</script>

如果想在Vue2中使用hook的话，可以像下面这样，对各个生命周期中的方法进行集合编写，重点就在“集合”这个词语：

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

还可以通过hook对“子组件”或“第三方组件”进行生命周期的监听，触发函数方法：

<template>
  <!--通过@hook:updated监听组件的updated生命钩子函数-->
  <!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发-->
  <xxx-comp @hook:updated="handleUpdateChange" />
</template>
<script>
import XxxComp from '../components/xxx-comp'
export default {
  components: {
    XxxComp
  },
  methods: {
    handleUpdateChange () {
      console.log('组件的updated钩子函数被触发')
    }
  }
}
</script>