Vue3生命周期函数详解

一、Vue生命周期函数

Vue的生命周期函数指的是在Vue实例创建、销毁、挂载等过程中被自动调用的函数。这些函数被称为钩子函数，可以在特定时间节点执行相应的操作，比如在实例创建完成后初始化数据、访问接口等。

二、Vue生命周期函数有几个

Vue的生命周期函数在整个生命周期过程中共分为8个阶段，分别是创建前、创建时、创建后、挂载前、挂载时、更新前、更新时、销毁前。每个阶段都会触发对应的生命周期函数，开发者可以在这些函数中添加自己的业务逻辑代码。

三、Vue生命周期函数哪个是必须的

在所有生命周期函数中，只有mounted是唯一必须的函数。当组件呈现在页面上时，mounted钩子函数会被调用，这是一个很好的时机来执行初始化工作。

四、Vue2生命周期函数

Vue2中的生命周期函数共分为8个阶段，分别是：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

// Vue2生命周期函数示例代码
export default{
    beforeCreate() {
        // 在实例初始化之后，data数据和methods方法之前调用
        console.log('beforeCreate钩子函数执行了');
    },
    created() {
        // 在实例初始化完成后调用，此时已经完成了数据绑定，但是还未开始渲染DOM
        console.log('created钩子函数执行了');
    },
    beforeMount() {
        // 在挂载开始之前被调用：相关的render函数首次被调用
        console.log('beforeMount钩子函数执行了');
    },
    mounted() {
        // 实例挂载后调用，此时实例已经完成了DOM渲染
        console.log('mounted钩子函数执行了');
    },
    beforeUpdate() {
        // 数据更新时调用，但是页面尚未进行渲染
        console.log('beforeUpdate钩子函数执行了');
    },
    updated() {
        // 数据更新并且页面也已经进行了渲染之后调用这个钩子函数
        console.log('updated钩子函数执行了');
    },
    beforeDestroy() {
        // 实例销毁之前调用
        console.log('beforeDestroy钩子函数执行了');
    },
    destroyed() {
        // 实例销毁之后调用
        console.log('destroyed钩子函数执行了');
    }
}

五、React生命周期函数

React 的生命周期函数一共有三个阶段，分别是：挂载、更新、卸载。

六、Vue常用的生命周期函数

Vue中常用的生命周期函数有：beforeCreate、created、mounted、beforeUpdate、updated、beforeDestroy、destroyed。其中，beforeCreate、created和mounted是最常用的三个生命周期函数，下面我们来逐一讲解：

• beforeCreate

在实例初始化之后，data数据和methods方法之前调用

• created

在实例初始化完成后调用，此时已经完成了数据绑定，但是还未开始渲染DOM。

• mounted

实例挂载后调用，此时实例已经完成了DOM渲染。通常在这个时候可以访问DOM元素。

• beforeUpdate

数据更新时调用，但是页面尚未进行渲染。可以执行更新前的一些操作。

• updated

数据更新并且页面也已经进行了渲染之后调用这个钩子函数。可以在这里执行更新后的一些操作。

• beforeDestroy

实例销毁之前调用。在这里可以做一些销毁之前必要的操作。

• destroyed

实例销毁之后调用，此时组件已经被完全销毁，做一些善后工作。

七、Vue生命周期函数使用场景

生命周期函数的使用场景很多，比如我们需要在组件挂载后才能执行某些DOM相关的操作，那么我们就可以在mounted钩子函数中进行这个操作。

// 使用mounted钩子函数获取DOM元素宽高，并设置属性
export default{
    mounted() {
        const el = document.getElementById('box');
        const width = el.offsetWidth;
        const height = el.offsetHeight;
        el.setAttribute('data-width', `${width}px`);
        el.setAttribute('data-height', `${height}px`);
    }
}

又比如我们需要在销毁组件之前保存一些数据，那么我们可以在beforeDestroy钩子函数中执行这个操作。

// 在beforeDestroy钩子函数中保存数据
export default{
    beforeDestroy() {
        const data = this.data;
        const postData = {
            userId: this.userId,
            data: JSON.stringify(data)
        };
        // 将数据上传到服务器
        axios.post('/api/saveData', postData).then(res => {
            // 如果保存成功，则提示保存成功
            alert('数据保存成功！');
        })
    }
}

八、Vue3生命周期钩子函数有哪些

Vue3相对于Vue2，钩子函数没有太多改动，变化较大的是composition api的引入，可以使我们在一些场景下编写更加灵活的组件。下面是Vue3中新增的两个钩子函数。

• beforeUnmount

在实例销毁之前调用，和Vue2中的beforeDestroy钩子函数是一致的。

• unmounted

在实例销毁之后调用，和Vue2中的destroyed钩子函数是一致的。

// Vue3生命周期示例代码
import { onMounted, onUnmounted } from "vue";
export default {
    setup() {
        onMounted(() => {
            console.log('mounted钩子函数执行了');
        });
        onUnmounted(() => {
            console.log('unmounted钩子函数执行了');
        });
    }
}

九、总结

Vue3中的生命周期函数在整个组件的生命周期过程中起到了非常关键的作用，在不同的生命周期函数中可以执行不同的操作。

在实际开发过程中，我们尽可能多地了解和掌握Vue3的生命周期，能帮助我们更好地编写可靠的组件和应用。