Vue3.x 版本的生命周期钩子函数

setup()    开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method

最新参考27.Vue3语法-组合式API-生命周期函数

//必须先引用再使用
import {onBeforeMount,onMounted,onUpdated,onBeforeUnmoun,onUnmounted} from 'vue'


//组件挂载到节点上之前执行的函数
onBeforeMount() 
 
//组件挂载完成后执行的函数    
onMounted() 

//组件更新之前执行  
onBeforeUpdate()

//组件更新之后执行      
onUpdated()      

//在组件卸载之前
onBeforeUnmount()   vue2

//组件销毁之后执行
onUnmounted()

<keep-alive></keep-alive> 

被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。

//被激活时执行
onActivated()  

//比如从 A 组件，切换到 B 组件，A 组件消失时执行
onDeactivated()

//当捕获一个来自子孙组件的异常时激活钩子函数
onErrorCaptured()

Vue2 和 Vue3 的对比

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

调试之用？！

//状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，他都会跟踪。只要页面有update的情况，他就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在
onRenderTracked()

//状态触发,它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来
onRenderTriggered()

<template>
  <div class="container">
    <h1>今天中午吃什么呢？</h1>
    <div>请你从下面选择一下</div>
    <div>
      <button
        v-for="(item, index) in eats"
        :key="index"
        @click="chooseEatFun(index)"
      >
        {{ index }}:{{ item }}
      </button>
    </div>
    <div>今天中午吃【{{ chooseEat }}】，let's go！</div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, onRenderTriggered } from "vue";
interface dataProps {
  eats: string[];
  chooseEat: string;
  chooseEatFun: (index: number) => void;
}

export default {
  name: "App",
  setup() {
    const data: dataProps = reactive({
      eats: ["煲仔饭", "大食堂", "火锅2"],
      chooseEat: "",
      chooseEatFun: (index: number) => {
        data.chooseEat = data.eats[index];
      },
    });
    const refData = toRefs(data);
    onRenderTriggered((event) => {
      console.log(event);
    });
    return {
      ...refData,
    };
  },
};
</script>

<style lang="less" scoped>
</style>