前言：

Vue2 和 Vue3 中的生命周期钩子的工作方式非常相似，我们仍然可以访问相同的钩子，也希望将它们能用于相同的场景。

如果项目使用 选项 API，就不必更改任何代码了，因为 Vue3 兼容以前的版本。
当然，我们用 Vue3 就是要用它的 组合 API，组合 API 中访问这些钩子的方式略有不同，组合API 在较大的Vue项目中特别有用。

一、什么是生命周期函数

组件从创建到销毁的整个过程，不同阶段执行不同的函数

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

选项式API下的生命周期函数使用	组合式API下的生命周期函数使用
`beforeCreate`	不需要（直接写到setup函数中）
`created`	不需要（直接写到setup函数中）
`beforeMount`	`onBeforeMount`
`mounted`	`onMounted`
`beforeUpdate`	`onBeforeUpdate`
`updated`	`onUpdated`
`beforeDestroyed`	`onBeforeUnmount`
`destroyed`	`onUnmounted`

在这里插入图片描述

主要 Vue 生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue 应用程序中有4个主要事件(8个钩子)：

创建 ---- 在组建创建时执行
挂载 ---- DOM 被挂载时执行
更新 ---- 当响应数据被修改时执行
销毁 ---- 在元素被销毁之前立即执行

在【options API】中，生命周期钩子是被暴露在 vue 实例上的选项，我们只需要调用使用即可。

在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。

import {
    
    onMounted} from 'vue'

在这里，beforecreate 和 created 被 setup 方法本身所替代。

二、什么是 Keep-Alive 组件

keepalive是 Vue 的内置组件，作用是将组件缓存在内存当中，防止重复渲染 DOM，属于消耗内存获取速度。常用的用法是将组件或者路由缓存，现有的用法 vue2.x 与 vue3.x有部分差别。以下主要将 keepaliev 在 vue3.0 中的用法。

点击跳转至官方网站查看 Keep-Alive 组件详情

三、生命周期函数分为几种，分别有什么用？

1. beforeCreate

beforeCreate 选项式声明周期函数
在组件实例初始化之前调用（props 解析已解析、data 和 computed 等选项还未处理）
不能访问组件的实例 this 及其组件中的数据源和函数等
不能访问组件中的视图 DOM 元素
组合式 API 中的 setup() 钩子会在所有选项式 API 钩子之前调用

2. created

created 选项式生命周期函数
在组件实例化成功后调用
可访问组件的实例 this 及其组件中的数据源和函数等
不能访问组件中的视图 DOM 元素

3. beforeMount/onBeforeMount

beforeMount：选项式生命周期函数、onBeforeMount：组合式生命周期钩子
组件视图在浏览器渲染之前调用
可访问组件实例东西（数据源、函数、计算属性等）
不能访问组件视图中的 DOM 元素

4. mounted/onMounted

mounted：选项式生命周期函数、onMounted：组合式生命周期钩子
组件视图在浏览器渲染之后调用
可访问组件实例东西（数据源、函数、计算属性等）
可以访问组件视图中的 DOM 元素

5. beforeUpdate/onBeforeUpdate

beforeUpdate：选项式生命周期函数、onBeforeUpdate：组合式生命周期钩子
数据源发生变化时，组件视图重新渲染之前调用
可访问组件实例东西（数据源、函数、计算属性等）
可以访问该组件中在更新之前的 DOM 元素，但是不能访问该组件中在更新之后的 DOM 元素

6. updated/onUpdated

updated：选项式生命周期函数、onUpdated：组合式生命周期钩子
数据源发生变化时，组件视图重新渲染之后调用
可访问组件实例东西（数据源、函数、计算属性等）
不可以访问该组件中在更新之前的 DOM 元素，但是可以访问该组件中在更新之后的 DOM 元素

7. beforeUnmount/onBeforeUnmount

beforeUnmount：选项式生命周期函数、onBeforeUnmount：组合式生命周期钩子
组件实例被卸载之前调用
可访问组件实例东西（数据源、函数、计算属性等）
可以访问组件视图中的 DOM 元素

8. unmounted/onUnmounted

unmounted：选项式生命周期函数、onUnmounted：组合式生命周期钩子
组件实例被卸载之后调用
可访问组件实例东西（数据源、函数、计算属性等）
不可以访问组件视图中的 DOM 元素
一般在这个生命周期函数里，我们可以手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。

四、在代码中如何使用生命周期函数？

1. 选项式

<script>
export default{
    
    
    props: ['subtitle'],
    data: () => ({
    
    
        age: 30
    }),
    methods: {
    
    
        showMessage() {
    
    
            console.log('函数 HELLO');  
        }
    },
    // 组件实例话之前
    // 可以访问 props 的数据的
    // 不能访问组件的实例 this 中的数据源和函数等
    // 不能访问组件中的视图DOM元素
    beforeCreate() {
    
    
        console.log('----------------------------')
        console.log('beforeCreate 组件实例话之前')
        console.log(this.$props.subtitle)
        console.log('不能访问组件的实例 this 中的数据源和函数等');
        console.log('不能访问组件中的视图DOM元素');
        // console.log(this.age)
        // this.showMessage()
        // console.log(document.getElementById('title').innerHTML)
    },
    // 组件实例话之后
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不能访问组件中的视图DOM元素
    created() {
    
    
        console.log('----------------------------')
        console.log('created 组件实例话之后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    },
    // 组件视图渲染之前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不能访问组件中的视图DOM元素
    beforeMount() {
    
    
        console.log('----------------------------')
        console.log('beforeMount 组件视图渲染之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    },
    // 组件视图渲染之后
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不能访问组件中的视图DOM元素
    mounted() {
    
    
        console.log('----------------------------')
        console.log('mounted 组件视图渲染之后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },
    // 数据源发生改变，视图重新渲染前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 可访问重新渲染的 DOM 元素之前的状态
    beforeUpdate() {
    
    
        console.log('----------------------------')
        console.log('beforeUpdate 数据源发生改变，视图重新渲染前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },
    // 数据源发生改变，视图重新渲染后
    // 可以访问组件中的数据，函数，自定义的属性等
    // 可访问重新渲染的 DOM 元素之后的状态
    updated() {
    
    
        console.log('----------------------------')
        console.log('updated 数据源发生改变，视图重新渲染后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },
    // 组件在卸载之前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 可访组件视图的 DOM 元素
    beforeUnmount() {
    
    
        console.log('----------------------------')
        console.log('beforeUnmount 组件在卸载之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },
    // 组件已卸载
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不可访组件视图的 DOM 元素
    unmounted(){
    
    
        console.log('----------------------------')
        console.log('unmounted 组件已卸载')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    }
}
</script>

<template>
    <h3 id="title">
        <i>年龄：{
    
    {
    
     age }}</i>
    </h3>

    <button @click="(age = 70)">年龄改成 70</button>
    <button @click="(age = 30)">年龄改成 30</button>
</template>

2. 组合式

<script setup>
import {
    
     onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';

let age = ref(30)

function showMessage() {
    
    
    console.log('HELLO')
}

// 组件视图渲染之前
// 能访问组件实例的东西（数据源、函数等）
// 但是不能访问组件视图中的 DOM 元素
onBeforeMount(() => {
    
    
    console.log('------------------------')
    console.log('onBeforeMount 组件视图渲染之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
})

// 组件视图渲染之后
// 能访问组件实例的东西（数据源、函数等）
// 可以访问组件视图中的 DOM 元素
onMounted(() => {
    
    
    console.log('------------------------')
    console.log('onMounted 组件视图渲染之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

// 数据源发生变化，组件视图重新渲染之前
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图渲染之前的 DOM 元素
onBeforeUpdate(() => {
    
    
    console.log('------------------------')
    console.log('onBeforeUpdate 数据源发生变化，组件视图重新渲染之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

// 数据源发生变化，组件视图重新渲染之后
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图渲染之后的 DOM 元素
onUpdated(() => {
    
    
    console.log('------------------------')
    console.log('onUpdated 数据源发生变化，组件视图重新渲染之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

// 组件卸载之前
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图 DOM 元素
onBeforeUnmount(() => {
    
    
    console.log('------------------------')
    console.log('onBeforeUnmount 组件卸载之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
}) 

// 组件卸载之后
// 能访问组件实例的东西（数据源、函数等）
// 不能访问组件视图 DOM 元素
onUnmounted(() => {
    
    
    console.log('------------------------')
    console.log('onUnmounted 组件卸载之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
}) 

</script>

<template>
    <h3 id="title">
        <i>年龄：{
    
    {
    
     age }}</i>
    </h3>
    <button @click="(age = 70)">年龄改成 70</button>
    <button @click="(age = 30)">年龄改成 30</button>
</template>

总结：

欢迎大家加入我的社区，在社区中会不定时发布一些精选内容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003

以上就是 Vue3 中生命周期的使用，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog

Vue3 中生命周期的使用

目录

前言：