Vue3 的生命周期

Vue3 是一个用于构建用户界面的渐进式框架，它提供了一套响应式的数据绑定和组合式的视图组件。Vue3 的组件实例在创建和销毁的过程中，会经历一系列的初始化步骤和清理操作，这些步骤和操作被称为生命周期钩子（lifecycle hooks），它们允许开发者在特定的时机执行自定义的逻辑代码。

生命周期图示

Vue3 的生命周期可以用下图来表示：

Vue3 Lifecycle Diagram

图中的每个箭头代表了一个生命周期钩子函数，它们分别是：

beforeCreate：在组件实例创建之前调用，此时组件的数据观测、事件监听和模板编译尚未开始，因此无法访问到组件的响应式数据、计算属性、方法等。
created：在组件实例创建之后调用，此时组件的数据观测、事件监听和模板编译已经完成，可以访问到组件的响应式数据、计算属性、方法等，但是还没有挂载到 DOM 上，因此无法访问到组件的元素或子组件。
beforeMount：在组件挂载到 DOM 之前调用，此时组件的虚拟 DOM 已经创建，但是还没有插入到父容器中，可以对虚拟 DOM 进行一些操作或修改。
mounted：在组件挂载到 DOM 之后调用，此时组件的虚拟 DOM 已经插入到父容器中，并且生成了真实的 DOM 节点，可以访问到组件的元素或子组件，并且可以执行一些需要 DOM 的操作，如添加事件监听器、发送网络请求等。
beforeUpdate：在组件更新之前调用，此时组件的数据已经发生变化，但是还没有更新到 DOM 上，可以在这个钩子中获取更新前的状态，并进行一些比较或逻辑处理。
updated：在组件更新之后调用，此时组件的数据已经更新到 DOM 上，并且完成了重新渲染，可以在这个钩子中获取更新后的状态，并进行一些后续操作或效果处理。
beforeUnmount：在组件卸载之前调用，此时组件还处于可用状态，可以在这个钩子中执行一些清理操作，如移除事件监听器、取消网络请求、停止定时器等。
unmounted：在组件卸载之后调用，此时组件已经从 DOM 中移除，并且停止了所有的响应式效果和事件监听，无法再访问到组件的任何属性或方法。

生命周期钩子的使用

在VUE3中要使用生命周期钩子函数，按如下方式使用：

使用setup函数，它是一个新的组件选项，可以在组件创建之前执行，并返回一个对象，该对象包含了组件的数据和方法。在setup函数中，可以使用import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'来导入生命周期钩子函数，并在函数体内调用它们。例如：

import { onMounted, onUnmounted } from 'vue'  
  
export default {  
    setup() {  
    // 在组件挂载之后执行  
        onMounted(() => {  
            console.log('mounted!')  
        })  
        // 在组件卸载之前执行  
        onUnmounted(() => {  
            console.log('unmounted!')  
        })  
    }  
}