vue2中監聽生命周期（hook）

很多人都知道，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>

好了，本次分享結束。get到了么？拿去裝逼吧