vue3:声明周期钩子vue2写法和vue3写法对比

<template>
{{num}}
<br>
<button @click="num ++"> ++</button>
  
</template>

<script>
import {ref} from 'vue'
export default {
    setup() {
        let num = ref(0);

        return {
            num
        }
        
    },
    beforeCreate() {
        console.log("before create......")
    },
    created() {
        console.log("created......")
    },
    beforeMount() {
        console.log("before mount......")
    },
    mounted() {
        console.log("mounted......")
    },
    beforeUpdate() {
        console.log("before update......")
    },
    updated() {
        console.log("updated......")
    },
    beforeUnmount(){
        console.log("before unmount......")
    },
    unmounted() {
        console.log("unmounted......")
    },

}
</script>

<style>

</style>

<template>
{{num}}
<br>
<button @click="num ++"> ++</button>
  
</template>

<script>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
    setup() {
        let num = ref(0);

        onBeforeMount(() => {
            console.log("before mount2......")
        });
        onMounted(() => {
            console.log(" mounted2......")
        });
        onBeforeUpdate(() => {
            console.log("before update2......")
        });
        onUpdated(() => {
            console.log("updated2......")
        });
        onBeforeUnmount(() => {
            console.log("before unmount2......")
        });
        onUnmounted(() => {
            console.log("unmounted2......")
        });

        return {
            num
        }
        
    },
 

}
</script>

<style>

</style>

相同的钩子，如果在setup里写了，配置项里也写了，setup里的钩子先执行。