Vue 生命周期

简介

每个 Vue 实例在被创建时都要经过一系列的初始化步骤，包括设置设置数据监听、编译模板、将实例挂载到 DOM 上，以及在数据变化时更新 DOM 等操作。

同时，在这个过程中，Vue 提供了一些称为生命周期钩子函数的接口，允许开发者在不同阶段添加自己的代码，以便在特定时刻执行特定的逻辑，这为定制和扩展 Vue 示例的行为提供了机会。

比如，页面在加载完成后，向服务器接口发起网络请求，获取页面中的数据。

生命周期钩子函数

生命周期钩子函数（Lifecycle Hooks）是 Vue 组件在不同阶段被自动调用的函数，允许在特定时刻执行特定的逻辑。

这些钩子函数都要接收一个无参无返回值的回调函数，用来执行在不同时刻需要处理的逻辑。

Vue 的生命周期函数在使用之前，需要导入。

常用的生命周期钩子函数

onBeforeMount: 注册一个钩子，在组件被挂载之前被调用。
onMounted: 注册一个回调函数，在组件挂载完成后执行。
onBeforeUpdate: 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
onUpdated: 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
onBeforeUnmount: 注册一个钩子，在组件实例被卸载之前调用。
onUnmounted: 注册一个回调函数，在组件实例被卸载之后调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        // 导入 Vue 中的函数
        const { 
            createApp, 
            ref,
            onMounted,
            onUpdated,
            onUnmounted,
            onBeforeMount, 
            onBeforeUpdate,
            onBeforeUnmount
        } = Vue

        window.onload = function(){
            createApp({
                setup() {
                    // 在基础初始化完成之后，数据和事件配置之前调用
                    onBeforeMount(() => {
                        console.log("beforeMount");
                    });

                    // 初始化全部完成，实例创建完成后立即调用
                    onMounted(() => {
                        console.log("mounted");
                    });

                    // 数据有更新，页面渲染之前调用
                    onBeforeUpdate(() => {
                        console.log("beforeUpdate");
                    });

                    // 数据有更新，页面渲染完毕后调用
                    onUpdated(() => {
                        console.log("updated");
                    });

                    // 实例销毁前调用
                    onBeforeUnmount(() => {
                        console.log("beforeDestroy");
                    });

                    // 实例销毁后调用
                    onUnmounted(() => {
                        console.log("destroyed");
                    });

                    const num = ref(0)
                    // 返回响应式变量或其他数据
                    return {
                        num
                    }
                }
            }).mount('#app');
        }
      </script>
</head>
<body>
    <div id="app">
        <div> 
            <button @click="num++">Add 1 --- [ {{ num }} ]</button>
        </div>
    </div>
</body>
</html>

生命周期示意图

下面是实例生命周期的图表。现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。

总结

生命周期钩子函数 Vue 中提供的一些接口，通过注册钩子函数，让开发者可以在不同的时刻进行更细致的操作。