前言

目标

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

生命周期

[Vue3] 6 生命周期_vue
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
        }
    }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.

[Vue3] 6 生命周期_生命周期_02

参看链接
 Vue2 生命周期