vue3生命周期原理與生命周期函數(shù)簡單應(yīng)用實例分析 原創(chuàng)
原理概述
Vue 3的生命周期(Lifecycle)指的是組件從創(chuàng)建到銷毀經(jīng)歷的一系列事件,在這些事件中可以執(zhí)行一些操作,例如初始化數(shù)據(jù)、渲染視圖、加載異步數(shù)據(jù)等。在Vue 3中,通過setup()函數(shù)來定義組件的生命周期。
實例分析
Vue 3的生命周期包含了以下幾個階段:
1. beforeCreate
在實例創(chuàng)建之前,即在初始化之前被調(diào)用。此時,尚未初始化組件實例,無法訪問data、methods和computed等屬性,在組件狀態(tài)初始化之前執(zhí)行一些操作。
export default { beforeCreate() { console.log('beforeCreate'); } }
2. created
在實例創(chuàng)建之后,即在初始化之后被調(diào)用。此時,已經(jīng)完成了數(shù)據(jù)觀測等配置,但尚未掛載DOM,并且可以訪問data、methods和computed等屬性??梢允褂胏reated鉤子函數(shù)進行數(shù)據(jù)初始化和事件的監(jiān)聽等操作。
import { onMounted, onUnmounted } from 'vue'; export default { data() { return { count: 0 }; }, created() { console.log('created'); }, mounted() { onMounted(() => { console.log('component mounted'); }); }, unmounted() { onUnmounted(() => { console.log('component unmounted'); }); } }
3. beforeMount
在掛載開始之前被調(diào)用。在此階段中,尚未渲染真實的DOM節(jié)點??梢允褂胋eforeMount鉤子函數(shù),在組件掛載之前進行一些異步操作,例如加載動畫等。
export default { beforeMount() { console.log('beforeMount'); } }
4. mounted
在掛載結(jié)束后被調(diào)用。此時,組件已經(jīng)渲染出真實的DOM。mounted鉤子函數(shù)往往用于初始化DOM操作以及與服務(wù)器交互后填充組件的數(shù)據(jù),例如通過ref獲取DOM節(jié)點和注冊事件監(jiān)聽器等。
export default { mounted() { console.log('mounted'); const button = this.$refs.myButton; button.addEventListener('click', () => { this.count++; }); } }
5. beforeUpdate
在數(shù)據(jù)更新之前被調(diào)用。此時,可以在更新之前訪問舊的數(shù)據(jù)狀態(tài)??梢允褂胋eforeUpdate鉤子函數(shù),在組件數(shù)據(jù)更新之前執(zhí)行一些操作,例如動態(tài)綁定class和style等。
export default { beforeUpdate() { console.log('beforeUpdate'); } }
6. updated
在數(shù)據(jù)更新之后被調(diào)用。此時,組件已經(jīng)更新DOM,可以通過訪問最新的數(shù)據(jù)狀態(tài)來完成DOM的操作??梢允褂胾pdated鉤子函數(shù),在組件數(shù)據(jù)更新之后執(zhí)行一些操作,例如觸發(fā)動畫效果等。
export default { updated() { console.log('updated'); } }
7. beforeUnmount
在組件卸載之前被調(diào)用。此時,組件實例仍然完全可用,但是它的視圖已經(jīng)被銷毀并且不再更新??梢允褂胋eforeUnmount鉤子函數(shù),在組件卸載之前執(zhí)行一些清理操作,例如取消事件監(jiān)聽器、定時器和異步請求等。
export default { beforeUnmount() { console.log('beforeUnmount'); } }
8. unmounted
在組件卸載之后被調(diào)用。此時,組件實例以及其所有相關(guān)聯(lián)的DOM元素均已銷毀,無法再訪問組件內(nèi)部數(shù)據(jù)和方法??梢允褂胾nmounted鉤子函數(shù),在組件卸載之后執(zhí)行一些最終清理操作。
export default { unmounted() { console.log('unmounted'); } }
需要注意的是,Vue 3中去掉了一些生命周期函數(shù),例如activated、deactivated和errorCaptured等,這些可以通過新的Composition API來實現(xiàn)。
總之,在Vue 3的開發(fā)中,生命周期一直是非常重要的概念之一,需要將鉤子函數(shù)應(yīng)用到合適的場景中,以充分利用Vue 3提供的生命周期機制來優(yōu)化組件的性能和行為。合理地利用生命周期可以提高組件的代碼質(zhì)量和運行效率。
相關(guān)文章
使用Vue.js和Element-UI做一個簡單登錄頁面的實例
下面小編就為大家分享一篇使用Vue.js和Element-UI做一個簡單登錄頁面的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02vue獲取token實現(xiàn)token登錄的示例代碼
最近新做了個vue項目,正好項目中有登錄部分,本文就詳細的介紹一下登錄部分的實現(xiàn),文中通過示例代碼介紹的非常詳細,感興趣的小伙伴們可以參考一下2021-11-11