在组件化的框架中，比如Angular、React或Vue，都为组件定义了生命周期这个概念，每个组件实例在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时，在这个过程中也会运行一些叫做生命周期钩子的函数，它们提供给用户在组件的不同阶段添加自己的代码的机会。
使用过Vue2.x的朋友肯定对它的生命周期钩子很熟悉了，因为在实际的开发过程中我们多多少少会用到他们，比如 created、mounted、destoryed等等。而在Vue3.0中，Vue2.x Options API形式的生命周期钩子函数和新的Composition API都可以使用，来看个示例代码就明白了：

const { onMounted } = Vue

const MyComp = {
    
    // Options API
    mounted() {
        console.log('>>>>>> mounted 1')
    },
    
    setup() {
        // Composition API
        onMounted(() => {
            console.log('++++++ mounted 2')
        })
    }
}

两种形式的生命周期函数可以共存（当然实际使用的时候最好只选用一种），它们都会被执行。Composition API形式的生命周期函数都是在 setup 方法中被调用注册。
最后，在实际的开发过程中，请注意一下Options API形式的组件生命周期钩子和Composition API之间的实际对应关系：

beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

整体代码如下：

const { createComponent, createApp, reactive } = Vue

// 计数器组件
const Counter = {
    props: {
        initCount: {
            type: Number,
            default: 0
        }
    },
    template: `
        <div class="counter-display">
            <span class="counter-label">恭喜你，你已经写了</span>
            <span class="counter-text">{{ state.count }}</span>
            <span class="counter-label">斤代码！</span>
        </div>
        <div class="counter-btns">
            <button class="btn" @click="increase">写一斤</button>
            <button class="btn" @click="reset">删库啦</button>
        </div>
    `,
    // 相当于 vue2.x beforeCreated, created
    setup(props) {
        const countOps = useCount(props.initCount)
        console.log("Counter ===> 相当于 vue2.x 中 beforeCreated, created")
        return { ...countOps }
    },
    onBeforeMount() {
        console.log("Counter ===> 相当于 vue2.x 中 beforeMount")
    },
    onMounted() {
        console.log("Counter ===> 相当于 vue2.x 中 mounted")
    },
    onBeforeUpdate() {
        console.log("Counter ===> 相当于 vue2.x 中 beforeUpdate")
    },
    onUpdated() {
        console.log("Counter ===> 相当于 vue2.x 中 updated")
    },
    onBeforeUnmount() {
        console.log("Counter ===> 相当于 vue2.x 中 beforeDestroy")
    },
    onUnmounted() {
        console.log("Counter ===> 相当于 vue2.x 中 destroyed")
    },
    onErrorCaptured() {
        console.log("Counter ===> 相当于 vue2.x 中 errorCaptured")
    }
}

function useCount(initCount) {
    const state = reactive({ count: initCount })
    console.log("state reactive", state)
    const increase = () => { state.count++ }
    const reset = () => { state.count = 0 }
    return { state, increase, reset }
}

// 创建一个 跟组件 app
const App = createComponent({
    // 这个就相对于 在另一个 .vue 文件 引用 Counter 组件，需要在 components 属性局部注册组件
    components: {
        Counter,
    },
    // 挂载到 App 模板中
    template: `
        <div class="container">
            <h3>计数器示例</h3>
            <Counter />
        </div>
    `,
    setup() {
        console.log("App ===> 相当于 vue2.x 中 beforeCreated, created")
    },
    onBeforeMount() {
        console.log("App ===> 相当于 vue2.x 中 beforeMount")
    },
    onMounted() {
        console.log("App ===> 相当于 vue2.x 中 mounted")
    },
    onBeforeUpdate() {
        console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
    },
    onUpdated() {
        console.log("App ===> 相当于 vue2.x 中 updated")
    },
    onBeforeUnmount() {
        console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    },
    onUnmounted() {
        console.log("App ===> 相当于 vue2.x 中 destroyed")
    },
    onErrorCaptured() {
        console.log("Counter ===> 相当于 vue2.x 中 errorCaptured")
    }
})

// 启动
// container 就是相当于 new Vue() 中 el 元素
const container = document.querySelector("#app")
// createApp() 就是相当于 new Vue() 内部返回的就是 new Vue()
const app = createApp()
// 挂载组件
app.mount(App, container)

转载自：https://zhuanlan.zhihu.com/p/95968847