//生命周期

//实例创建前
beforeCreate > setup()
//实例创建后
created > setup()

//dom 渲染前
beforeMount > onBeforeMount
//dom 渲染后
mounted > onMounted

//数据 更新前
beforeUpdate > onBeforeUpdate
//数据 更新后
updated > onUpdated

//实例(组件) 销毁前
beforeDestroy > onBeforeUnmount
//实例(组件) 销毁后
destroyed > onUnmounted

/* 以下两个是缓存组件或路由的时候会调用 */
//被 keep-alive 缓存的组件激活时调用（显示）
activated > onActivated
//被 keep-alive 缓存的组件停用时调用 (隐藏)
deactivated > onDeactivated

/* 以下生命周期不常用到 */
//当捕获一个来自子孙组件的错误时被调用。 主要为了调试使用
errorCaptured > onErrorCaptured
//跟踪虚拟 DOM 重新渲染时调用。
renderTracked > onRenderTracked
//当虚拟 DOM 重新渲染被触发时调用。
renderTriggered > onRenderTriggered

//生命周期

//实例创建前
beforeCreate > setup()
//实例创建后
created > setup()

//dom 渲染前
beforeMount > onBeforeMount
//dom 渲染后
mounted > onMounted

//数据 更新前
beforeUpdate > onBeforeUpdate
//数据 更新后
updated > onUpdated

//实例(组件) 销毁前
beforeDestroy > onBeforeUnmount
//实例(组件) 销毁后
destroyed > onUnmounted

/* 以下两个是缓存组件或路由的时候会调用 */
//被 keep-alive 缓存的组件激活时调用（显示）
activated > onActivated
//被 keep-alive 缓存的组件停用时调用 (隐藏)
deactivated > onDeactivated

/* 以下生命周期不常用到 */
//当捕获一个来自子孙组件的错误时被调用。 主要为了调试使用
errorCaptured > onErrorCaptured
//跟踪虚拟 DOM 重新渲染时调用。
renderTracked > onRenderTracked
//当虚拟 DOM 重新渲染被触发时调用。
renderTriggered > onRenderTriggered

<script lang="ts">
import { defineComponent, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated } from 'vue';

export default defineComponent({
  name: 'Home',
  components: {
  },
  setup(){
    //实例创建前 与 实例创建后
    console.log('实例创建前 与 实例创建后');

    //dom 渲染前
    onBeforeMount(() =>{
      console.log('dom 渲染前');
    })

    //dom 渲染后
    onMounted(() =>{
      console.log('dom 渲染后');
    })

    //数据 更新前
    onBeforeUpdate(() =>{
      console.log('数据 更新前');
    })

    //数据 更新后
    onUpdated(() =>{
      console.log('数据 更新后');
    })

    //实例(组件) 销毁前
    onBeforeUnmount(() =>{
      console.log('实例(组件) 销毁前');
    })

    //实例(组件) 销毁后
    onUnmounted(() =>{
      console.log('实例(组件) 销毁后');
    })

    //被 keep-alive 缓存的组件激活时调用（显示）
    onActivated(() =>{
      console.log('被 keep-alive 缓存的组件激活时调用（显示）');
    })

    //被 keep-alive 缓存的组件激活时调用（隐藏）
    onDeactivated(() =>{
      console.log('被 keep-alive 缓存的组件激活时调用（隐藏）');
    })

    return{
    }
  }
});
</script>

<script lang="ts">
import { defineComponent, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated } from 'vue';

export default defineComponent({
  name: 'Home',
  components: {
  },
  setup(){
    //实例创建前 与 实例创建后
    console.log('实例创建前 与 实例创建后');

    //dom 渲染前
    onBeforeMount(() =>{
      console.log('dom 渲染前');
    })

    //dom 渲染后
    onMounted(() =>{
      console.log('dom 渲染后');
    })

    //数据 更新前
    onBeforeUpdate(() =>{
      console.log('数据 更新前');
    })

    //数据 更新后
    onUpdated(() =>{
      console.log('数据 更新后');
    })

    //实例(组件) 销毁前
    onBeforeUnmount(() =>{
      console.log('实例(组件) 销毁前');
    })

    //实例(组件) 销毁后
    onUnmounted(() =>{
      console.log('实例(组件) 销毁后');
    })

    //被 keep-alive 缓存的组件激活时调用（显示）
    onActivated(() =>{
      console.log('被 keep-alive 缓存的组件激活时调用（显示）');
    })

    //被 keep-alive 缓存的组件激活时调用（隐藏）
    onDeactivated(() =>{
      console.log('被 keep-alive 缓存的组件激活时调用（隐藏）');
    })

    return{
    }
  }
});
</script>