一篇文章带你了解Vue3生命周期

前言

每个 Vue 实例在被创建时都要经过一系列的初始化的过程。例如：从开始创建、初始化数据、编译模板、挂载DOM、数据变化时更新DOM、卸载等一系列过程。我们称这一系列的过程 就是Vue的生命周期。即Vue实例从创建到销毁的过程就是生命周期。在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会，利用各个钩子来完成我们的业务代码

1. Vue2生命周期

学过Vue2的都知道，Vue2中总共包含8个不同阶段的生命周期，每个阶段都有一个对应的生命周期钩子函数。生命周期钩子函数是在Vue组件的不同阶段调用的函数，可以在每个阶段执行自定义的操作。以下是Vue 3的生命周期。

2. Vue3生命周期

Vue2中的生命周期在Vue3中依然可以使用，和Vue2的生命周期相比，Vue3少了onBeforeCreate和onCreate两个周期，使用setup来代替这两个生命周期，同时Vue2中的onBeforeDestroy和destroyed在Vue3中更名为onBeforeUnmount和onUnmounted，下面这张图就是Vue3的整个生命周期

2.1 初始化阶段

setup 在这个过程中可以执行父组件中的传值， 等一些初始化操作。

2.2 挂载阶段

onBeforeMount、onMounted

2.4 数据更新

onBeforeUpdate、onUpdated

2.5 销毁阶段

onBeforeUnmount、onUnmounted

2.6 代码示例：        

        同样我们也通过组件的调用，来展示组件从创建、数据更新、到组件销毁Vue3的整个生命周期过程。Vue3中调用组件不像Vue2中import引入之后，在compontent的Option Api中配置，Vue3中只需要import引入组件，在template模版中直接使用子组件即可。

父组件

在父组件中我们通过v-if来控制子组件的创建和销毁

子组件 

<template>
    <div class="container">
        我是组件
        <button @click="change">改变count值</button>
        count值：{{ count }}
        <p>
            <button @click="send">调用父组件方法</button>
        </p>
    </div>

</template>
<script setup lang="ts">
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'


// setup时可以进行接收父组件传值等操作
const props = defineProps({
    showCompontent:{
        type:Boolean,
        default:true
    }
})

// 调用父组件中的方法
const emit = defineEmits(['on-click'])

const send = ()=>{
    emit('on-click','value')
}

const count:number = ref(10);

function change():void{
    count.value ++
}

// 创建组件之前
onBeforeMount(()=>{
    // 读不到DOM
    console.log("onBeforeMount 创建之前调用");
})
// 组件创建完成
onMounted(()=>{
    console.log("onMounted 创建组件完成调用,可以获取到DOM");
})
// 数据更新之前
onBeforeUpdate(()=>{
    console.log("onBeforeUpdate 组件数据更新前调用");
})
// 数据更新完成
onUpdated(()=>{
    console.log("onUpdated 组件数据更新后调用");
})
// 组件销毁之前
onBeforeUnmount(()=>{
    console.log("onBeforeUnmount 组件销毁前调用");
})
// 组件销毁完成
onUnmounted(()=>{
    console.log("onUnmounted 组件销毁后调用");
})


</script>
<style scoped>
.container{
    width:100%;
    height:120px;
    background:#108eff;
    color:#fff;
    font-size:50px;
    color:#fff;
    line-height:120px;
    padding:0px 20px;
}
</style>

持续更新中............