vue3的生命周期钩子 （最全的统计）

VUE3的生命周期钩子 - 最全！！！

**稀有的 onRenderTracked onRenderTriggered **

<template>

  <button 
    v-for="(item ,i) in girls" :key="i"
    @click="selgirlsFunction(i)"
  >{{i+1}}:{{item}}</button>
  <div>
    选择【{{selGirls}}】为你服务
  </div>
</template>
import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onActivated,onDeactivated,onErrorCaptured,onRenderTracked,onRenderTriggered} from 'vue';
<script lang="ts">
// setup是在 beforceCreate created  之前执行

interface DataProps{
  girls:string[],
  selGirls:string,
  selgirlsFunction:(i:number)=> void
}
export default {
  name: 'App',
  setup() {
    console.log('1-开始创建组件执行  ----  setuo'); //代替了beforceCreate created
    const data:DataProps=reactive({
      girls:['大脚','小脚','高的'],
      selGirls:'',
      selgirlsFunction:(i: number)=>{
        data.selGirls=data.girls[i]
      }
    })
    onBeforeMount(()=>{
      console.log('2- 挂在到页面之前执行 ---  onBeforeMount');
    })
    onMounted(()=>{
      console.log('3- 组件挂在完毕执行 --- onMounted');
    })
    onBeforeUpdate(()=>{
      console.log('4- 组件更新前执行 --- onMounted');
    })
    onUpdated(()=>{
      console.log('5- 组件更新后执行 ---  onUpdated');
    })
    onBeforeUnmount(()=>{
      console.log('6- 组件卸载前执行 ---  onBeforeUnmount');
    })
    onUnmounted(()=>{
      console.log('7- 组件卸载后执行 ---  onUnmounted');
    })
    onActivated(()=>{
      console.log('使用keep-alive 激活时时执行的');
      
    })
    onDeactivated(()=>{
      console.log('使用keep-alive 组件消失时候执行的');
      
    })
    onErrorCaptured(()=>{
      console.log('捕获子组件异常的时候执行');
    })

    //  vue3新加的  用来调试，超级方便
    onRenderTracked((event)=>{
      console.log('状态改变跟中钩子函数--->',event);
    })
    onRenderTriggered((event)=>{
      //event返回当前点击数据的变化
      console.log('状态针对性跟中钩子函数--->',event);
    })

      



    const refData=toRefs(data)

    return{
      ...refData
    }
  },
}

</script>