vue2-vue3監聽子組件的生命周期的兩種方式

1.生命周期

生命周期是指:vue實例從創建到銷毀這一系列過程。vue官網生命周期如下圖所示：

vue的生命周期有多少個

beforeCreate, created,
beforeMount, mounted,
beforeUpdate, updated,
beforeDestroy,destroyed,
有些小伙伴可能會說是這8個，其實不止這8個。
當使用keep-alive時，還有2個鈎子函數：
activated(){} 組件進入，組件被激活的時候調用
deactivated(){},組件離開，組件失活的時候調用

errorCaptured是vue2.5.0版本新增的一個鈎子函數，
它主要用來捕獲一個來自子孫組件的錯誤，即可以應用在前端監控中。

所以vue一共有11個說明周期鈎子函數

如何去監聽子組件的生命周期鈎子函數

// father.vue
<Child @mounted="doSomething"/>
    
// Child.vue
mounted() {
  this.$emit("mounted");
}

在子組件中的生命周期中使用$emit將觸發的事件拋出去。
的確這樣是可以的。
但是如何這個組件是第三方的。
我們難道也要去修改人家的代碼嗎？
有沒有有其他辦法呢

hook鈎子函數去監聽組件的聲明周期

<template>
  <div>
    <testCom  @hook:mounted="doSomething" ></testCom>
  </div>
</template>
<script>
import testCom from '@/components/test-com.vue'
  export default {
    components:{
      testCom
    },
    methods:{
      doSomething(){
        console.log("子組件的生命周期")
      }
    }
  }
</script>

通過hooks，就可以去監聽組件的生命周期了。
同時我們不需要去更改子組件中的代碼
是不是更加的方便了呢

需要注意的是：

//  father.vue
<Child @hook:mounted="doSomething" ></Child>
doSomething() {
   console.log('父組件監聽到 mounted 鈎子函數22 ...');
},

//  Child.vue
mounted(){
   console.log('子組件觸發 mounted 鈎子函數11 ...');
},

也就是是說子組件中有mounted生命周期， 
我們在父頁面中使用了@hook去監聽生命周期
它的打印順序是怎么樣的呢？【先子后父】
// 以上輸出順序為：
// 子組件觸發 mounted 鈎子函數11 ...
// 父組件監聽到 mounted 鈎子函數22 ...  

概述

在 Vue 2 中，我們可以通過事件來監聽組件生命周期中的關鍵階段。
這些事件名都是以 hook: 前綴開頭，
並跟隨相應的生命周期鈎子的名字。

在 Vue 3 中，
這個前綴已被更改為 vnode-。
額外地，這些事件現在也可用於 HTML 元素，和在組件上的用法一樣。

vue3 監聽子組件的生命周期

<template>
  <div>
      <TestA @vnode-mounted="sonMounted"></TestA>
      <TestB></TestB>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref,markRaw } from "@vue/reactivity"
import { onMounted } from "@vue/runtime-core"
import TestA from "../components/TestA.vue"
import TestB from "../components/TestB.vue"
onMounted(()=>{
  console.log('頁面中的生命周期');
})
const sonMounted=()=>{
  console.log('子組件的生命周期已經渲染染成');
}
</script>