vue3生命周期

1. options类型的生命周期没有变化,setup类型的生命周期有一些变化

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeUnmount -> onBeforeUnmount
• unmounted -> onUnmounted
• errorCaptured -> onErrorCaptured
• renderTracked -> onRenderTracked
• renderTriggered -> onRenderTriggered
• activated -> onActivated
• deactivated -> onDeactivated

import {onBeforeMount, onMounted} from 'vue'
export default defineComponent({
    setup(props, context){
        console.log('setup');
        onBeforeMount(() => {
            console.log('onBeforeMount');
        })
        onMounted(() => {
            console.log('onMounted');
        })
    },
    beforeCreate() {
        console.log('beforeCreate');
    },
    created() {
        console.log('created');
    },
    beforeMount() {
        console.log('beforeMount');
    },
    renderTracked(e) {
        console.log('renderTracked', mounted);
    },
    renderTriggered(e) {
        console.log('renderTriggered', e);
    },
    mounted() {
        console.log('mounted');
    },
    beforeUpdate() {
        console.log('beforeUpdate');
    },
    updated() {
        console.log('updated');
    },
    activated() {
        console.log('updated');
    },
    deactivated() {
        console.log('deactivated');
    }
 })

// 打印顺序  
setup 
beforeCreate
created
onBeforeMount
beforeMount
renderTracked
onMounted
mounted

• setup执行优先级最高在options的beforeCreate之前
• 同类型的生命周期定义在setup里面高于options里面的
• renderTriggered、beforeUpdate、updated、activated、deactivated在组件初始化的时候不执行

几个特殊的生命周期

1. renderTracked 跟踪响应式变量(定义了没有被使用的不会)，组件加载的时候调用，跟踪多个变量就会执行多少次，将跟踪的变量信息当作参数。执行顺序在beforeMount之后mounted之前

2. renderTriggered 被跟踪的变量发生变化的时候执行，也是修改多少个就执行多少次，会将变量和修改的信息当作参数

3. beforeUpdate、updated 修改数据导致dom重新渲染时执行，组件首次渲染时不执行。

4. activated、deactivated 组件被keep-alive缓存重新访问执行activated离开执行deactivated，组件首次渲染不执行。