每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在这些过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码，这些过程为：

1、初使化组件以及组件的状态组合式

在讲组合式API的时候有一个有一个setup函数，所以有状态、事件方法等都是在这个函数中声明的。其实这个setup函数相当于组件及组件状态初使化时的钩子函数。

export default {
    // 在setup中进行初使化时的各种操作
    setup() {
        // 在此声明各种响应式、非响应式的状态
        // 声明各种和状态相关的事件、方法等
    }
}

选项式

选项式风格中，初使化这个过程分为两个部分：组件实例初始化完成后与组件处理好所有状态和状态相关选项后。

组件实例初始化完成后这个过程的钩子函数为beforeCreated，组件处理好所有状态和状态相关选项后的钩子函数为created。

exoirt default {
    beforeCreated() {
             
    },
    created() {
        
    }
}

除了可以声明一些状态和状态相关的方法外，还可以做一些页面相关的小量数据前置处理，但是像API接口获取数据、大量数据处理这些建议不放在初使化这一过程中，会导致页面渲染前占用太多时间。

组件被挂载前组合式

组合式中这个钩子函数为onBeforeMount, 使用方式如下：

<script setup>
    import { onBeforeMount } ftom "vue";
     
    onBeforeMount(() => {
        // 执行一些操作
    );
script>

基本所有的生命周期钩子函数的使用方式都是先从vue中导入相对的方法，然后再使用，都是接收一个方法作为参数，这个方法里的代码就是你想要在这个生命周期中执行的代码(setup方法除外，这个比较特殊，毕竟就算是钩子函数也得先在setup方法中先初使化，才能被执行)。

选项式

在选项式中叫beforeMount方法，使用方式如下：

export default {    
    beforeMount() {
        // 执行代码
    }
}

注意到了一个地方没，选项式和组合的名称只是在组合式中多了一个前置的on，基本以下的钩子函数都是这样的，后续的就不一一去举例说明使用了，都是一样的使用格式。

组件被挂载后

组合式中为onMounted, 选项式中为mounted。

因为这个过程中组件已被挂载到页面上了，所以可以开始处理一些从后端获取数据等一系列操作了，就不会在处理这些数据或逻辑的过程因耗时过长导致耽误组件挂载的时间。

数据更新之前

组合式中为onBeforeUpdate, 在选项式中为beforeUpdate。

在组件即将因为响应式状态变更而更新其DOM 树之前调用。

数据更新之后

组合式中为onUpdated, 在选项式中为updated。

在组件因为一个响应式状态变更而更新其 DOM 树之后调用。

组件被卸载之前

组合式中为onBeforeUnmount, 在选项式中为beforeUnmount。

组件实例被卸载之后

组合式中为onUnmounted, 在选项式中为unmounted。

其它

还有一些其它但是一般情况用不到的特殊的生命周期钩子，如：捕获了后代组件传递的错误时以及一些用于调试的钩子，可以后期去官网了解一下。