vue3生命周期函數(shù)使用及說明(掛載、更新、銷毀)
更新時間：2026年05月16日 15:55:08 作者：冰涼小腳
文章對比了Vue2和Vue3的生命周期函數(shù),指出Vue3在Vue2的基礎(chǔ)上增加了on前綴的生命周期,移除了了創(chuàng)建前后的生命周期鉤子,并引入了setup和onUnmount等等新特性,文章強(qiáng)調(diào)了在單頁面中生命函數(shù)可以多次使用,并提供了表格對比幫助理解
vue3生命周期函數(shù)(掛載、更新、銷毀)
在這之前，相必用戶也是用過vue2的經(jīng)歷，所以，在講解之前先對vue2和vue3的生命周期進(jìn)行對比：
| Option API | 組合API |
|---|---|
| beforeCreate | -setup |
| created | -setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| activated | onActivated |
通過表格對比可以看出
1、vue3的生命周期就是在vue2的基礎(chǔ)上前面增加（on）
2、vue3去除創(chuàng)建前后生命鉤子，取而代之的為setup
3、銷毀變了 onUnmounted , onBeforeUnmount
使用舉例
<script setup>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
console.log('setup--創(chuàng)建前/后');
onBeforeMount(() => {
console.log('onBeforeMount--掛載前')
})
onMounted(() => {
console.log('onMounted--掛載后')
})
onBeforeUpdate(() => {
console.log('onBeforeUpdate--更新前')
})
onUpdated(() => {
console.log('onUpdated--更新后')
})
onBeforeUnmount(() => {
console.log('onBeforeUnmount--銷毀前')
})
onUnmounted(() => {
console.log('onUnmounted--銷毀后')
})
</script>注：
在vue3中，單個頁面中一個生命函數(shù)可以多次使用
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要給大家介紹了關(guān)于el-table虛擬滾動的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue中this.$createElement方法的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了解決vuecli3中img src 的引入問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
我在做一個附件刪除功能的時候發(fā)現(xiàn),明明打印出來附件已經(jīng)沒有數(shù)據(jù)了但是頁面就是不刷新, this.$set()不生效,所以本文小編給大家介紹了vue中this.$set()不更新的解決方法,需要的朋友可以參考下2023-11-11
ref對象可以通過.value屬性進(jìn)行修改，修改后的值也是響應(yīng)式的，并且修改后會觸發(fā)相關(guān)的副作用，這篇文章主要介紹了vue3中的ref(),需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue封裝數(shù)字框組件實現(xiàn)流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-04-04
本文主要介紹了Vue3中使用鉤子函數(shù)來修改路由中的meta屬性值的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
這篇文章主要介紹了vue中標(biāo)簽自定義屬性的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue 基于abstract 路由模式 實現(xiàn)頁面內(nèi)嵌的示例代碼
這篇文章主要介紹了vue 基于abstract 路由模式 實現(xiàn)頁面內(nèi)嵌的示例代碼，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12