vue3_01生命周期函数

<template>
    <div>
        <p>这是第一个组件</p>
        
    </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, onMounted } from 'vue';
export default defineComponent(
    {
        setup() {//setup相当于一个生命周期
            //什么时候执行？setup() 钩子会在所有选项式 API 钩子之前调用
            console.log('执行了setup')
            onBeforeMount(
                () => {
                    console.log("执行了onBeforeMount")
                }
            ),
                onMounted(() => {
                    console.log("执行了onMounted")
                })

        },
    }
)
</script>

<style lang="scss" scoped>

</style>

vue3相比于vue2多了组合式AP

beforeCreate -> setup() 开始创建组件之前，创建的是data和method

created -> setup()

beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。

mounted -> onMounted 组件挂载完成后执行的函数

beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。

updated -> onUpdated 组件更新完成之后执行的函数。

beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。

destroyed -> onUnmounted 组件卸载之前执行的函数。
在vue3.0使用生命周期钩子，需要先引入再使用: