首页 > 建站教程 > 前端框架 >  vue3生命周期详解正文

vue3生命周期详解

Vue生命周期是指vue实例对象从创建之初到销毁的过程。


vue3生命周期详解


vue2的生命周期如下:

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
activated     
deactivated   
errorCaptured


vue3新增了一个setup生命周期函数,setup执行的时机是在beforeCreate生命函数之前执行,因此在这个函数中是不能通过this来获取实例的;同时为了命名的统一,将beforeDestroy改名为beforeUnmount,destroyed改名为unmounted:

beforeCreate // 建议使用setup代替
created // 建议使用setup代替
setup
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted


生命周期示例代码如下:

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from 'vue'
 
export default {
  setup () {
    // 其他的生命周期
    onBeforeMount (() => {
console.log("App ===> 相当于 vue2.x 中 beforeMount")
    })
    onMounted (() => {
    console.log("App ===> 相当于 vue2.x 中 mounted")
    })
    
    // 注意,onBeforeUpdate 和 onUpdated 里面不要修改值
    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")
    })
   
    return {
    }
  }
}