Vue.js 3 - Composition API使用详解8（组件生命周期函数）

2026-05-06 发布：hangge 阅读：34

setup 函数不但可以替代 data、methods、computed、watch 等选项，还可以替代生命周期函数（钩子）。如果想在 setup 函数中使用组件生命周期函数，那么可以通过直接导入 onXxx 函数来注册生命周期函数，下面通过样例进行演示。

八、组件生命周期函数

1，基本介绍

（1）下表为 Vue.js 3 提供的 Composition API（组合式 API）的生命周期函数，并对比 Composition API 和 Options API（选项式 API）的生命周期函数的对应关系。

选项式 API	组合式 API
beforecreate	-
created	-
beforeMount	onBeforeMount
mounted	onMounted
beforeupdate	onBeforeUpdate
updated	onUpdated
beforeunmount	onBeforeUnmount
unmounted	onUnmounted
activated	onActivated
deactivated	onDeactivated

（2）可以看到，Composition API 没有提供 beforeCreate 和 created 生命周期函数，而是直接使用 setup 函数代替。需要注意的是，setup 函数会在 beforeCreate 之前被调用。

提示：因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

2，样例代码

（1）下面代码在组件中注册 onMounted、onUpdated 和 onUnmounted 生命周期函数，其中 onMounted 生命周期函数被注册了两次。

<template>
    <div>
        <button @click="increment">点击+1：{{ counter }}</button>
    </div>
</template>

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

export default {
    setup() {
        const counter = ref(0);
        const increment = () => counter.value++

        // 生命周期钩子函数 （同一个生命周期函数可以存在多个）
        onBeforeMount(() => {
            console.log("App onBeforeMount");
        })
        onMounted(() => {
            console.log("App Mounted1");
        })
        onMounted(() => {
            console.log("App Mounted2");
        })
        onUpdated(() => {
            console.log("App onUpdated");
        })
        onUnmounted(() => {
            console.log("App onUnmounted");
        })

        return { counter, increment }
    }
}
</script>

（2）在浏览器中刷新页面后，在控制台中会依次打印“App onBeforeMount”“App Mounted1”“App Mounted2”，每次单击“单击+1”按钮，都会打印一次“App onUpdated”。