前言

目标

1 vue3生命周期用法 2 vue3与vue2的生命周期的区别

生命周期

Vue2.0与Vue3.0生命周期不同之处

1. 对比Vue2.0,Vue3.0第一步就会配置并挂载el,后续不会再去判断el 是否配置
2. Vue3.0中的setup相当于Vue2.0生命周期中的beforeCreate和created
3. beforeUnmount与unmounted相当于Vue2.0中的beforeDestroy与destroyed

生命周期使用

引入钩子

import { ref,onBeforeMount,onMounted,onUnmounted,onBeforeUnmount,onUpdated,onBeforeUpdate } from 'vue'

使用钩子

 setup(props,context){

        let count = ref(0)
        function add (){
            count.value++
        }
        console.log('--setup--')
        onBeforeMount(()=>{
            console.log('---onBeforeMount---')
        }) 
        onMounted(()=>{
            console.log('---onMounted---')
        }) 
        onUnmounted(()=>{
            console.log('---onUnmounted---')
        }) 
        onBeforeUnmount(()=>{
            console.log('---onBeforeUnmount---')
        }) 
        onUpdated(()=>{
            console.log('---onUpdated---')
        }) 
        onBeforeUpdate(()=>{
            console.log('---onBeforeUpdate---')
        }) 
        return{
            count,
            add
        }
    }

参看链接 Vue2 生命周期