vue2中监听生命周期（hook）

Z时代
2024-01-10
分类：综合

vue

很多人都知道，vue3中加入了hook的概念，让我们代码看的更为整齐，但是不少人却不知道，其实vue2中已经有了'hook'的概念。下面就给大家说说vue2中怎么使用hook

先上一段代码，大多数人在开发过程中都是这么写的，这么写不能说不好吧，但是代码过分分散，很是杂乱，中间可能相差几百行，可读性相当差

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

下面，本次重点来了：集合！

我们可以借助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>

这么看可读性一下子就好了，代码也更加集中，别人在改的时候也不至于一下子翻到下半屏，一下上半屏

在Vue组件中，可以用过$on,$once去监听所有的生命周期钩子函数，如监听组件的updated钩子函数可以写成 this.$on('hook:updated', () => {})

再来说第二种场景吧，假如你用了第三方的组件，想在第三方组件数据变化时进行一些操作，而这个组件正好没有提供change方法
这时候应该怎么办？当然最好是可以深入组件去修改。但是假如第三方组件又是打包过后的代码呢？痛苦的去看么？
不，我来教你一个新的神器

外部监听生命周期函数

<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>