Vue3 中生命周期的使用

前言：

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

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

2. created

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

3. beforeMount/onBeforeMount

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

4. mounted/onMounted

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

5. beforeUpdate/onBeforeUpdate

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

6. updated/onUpdated

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

7. beforeUnmount/onBeforeUnmount

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

8. unmounted/onUnmounted

1. unmounted：选项式生命周期函数、onUnmounted：组合式生命周期钩子
2. 组件实例被卸载之后调用
3. 可访问组件实例东西（数据源、函数、计算属性等）
4. 不可以访问组件视图中的 DOM 元素
5. 一般在这个生命周期函数里，我们可以手动清理一些副作用，例如计时器、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