Vue2.x
你不能使用箭頭函數(shù)來(lái)定義一個(gè)生命周期方法Ｒ承臁蹂喻！因?yàn)閠his啥也找不到還報(bào)錯(cuò)惕医！
beforeCreate
在實(shí)例初始化之后浮入，數(shù)據(jù)觀(guān)測(cè) (data observer) 和 event/watcher 事件配置之前執(zhí)行，此時(shí)組件實(shí)例還未創(chuàng)建做粤，通常用于插件開(kāi)發(fā)中執(zhí)行一些初始化任務(wù)浇借。
created
組件實(shí)例已經(jīng)創(chuàng)建完成，并配置了數(shù)據(jù)觀(guān)測(cè) (data observer)怕品，property 和方法的運(yùn)算妇垢，watch/event 事件回調(diào)。但是還沒(méi)有掛載DOM，此階段可用于異步數(shù)據(jù)獲取闯估。
beforeMount
在掛載開(kāi)始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用灼舍。
mounted
組件實(shí)例被掛載后完成，DOM已創(chuàng)建涨薪，此階段可用于訪(fǎng)問(wèn)數(shù)據(jù)和DOM元素骑素，但不會(huì)保證所有子組件都一起被掛載。如果您希望整個(gè)視圖都完成渲染可以在 mounted 內(nèi)部使用 vm.$nextTick
beforeUpdate
數(shù)據(jù)更新前調(diào)用刚夺，可用于獲取更新前的狀態(tài)献丑。可在這里 手動(dòng)移除已經(jīng)添加的事件監(jiān)聽(tīng)器侠姑。
updated
此函數(shù)執(zhí)行的時(shí)候阳距。DOM已經(jīng)更新。
updated 不會(huì)保證所有的子組件也都一起被重繪结借。如果你希望等到整個(gè)視圖都重繪完畢，可以在 updated 里使用 vm.$nextTick
beforeDestroy
實(shí)例銷(xiāo)毀之前調(diào)用卒茬。在這一步船老，實(shí)例仍然完全可用，此時(shí)可以取消定時(shí)器和訂閱事件圃酵。
除了beforeCreate柳畔、created外其他生命周期鉤子函數(shù)在服務(wù)器端渲染期間均不被調(diào)用。
官網(wǎng)大圖鎮(zhèn)樓：
Vue3
因?yàn)殂^子函數(shù)們依賴(lài)內(nèi)部的全局狀態(tài)來(lái)定位當(dāng)前的組件實(shí)例郭赐，所以他們只能在 setup() 期間注冊(cè)及使用薪韩。
import { onMounted, onUpdated, onUnmounted } from 'vue'
const MyComponent = {
setup() {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
},
}
- 與2.x的對(duì)比（兩個(gè)被替換了，其余的就是改了個(gè)名）
- beforeCreate捌锭、created由setup()代替俘陷。
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
- 新增了2個(gè)方便調(diào)試 debug 的回調(diào)鉤子（為了不誤導(dǎo)請(qǐng)前往官方文檔）
Vue2.x + Composition API 與 Vue3.x
在 Vue2.x + Composition API的環(huán)境下，進(jìn)行兩者鉤子函數(shù)混用時(shí)：Vue2.x 的回調(diào)函數(shù)會(huì)相對(duì)先執(zhí)行（例：mounted 先于 onMounted執(zhí)行）
在 Vue3.x 環(huán)境下观谦，為了兼容 Vue2.x 的語(yǔ)法拉盾，全部舊的生命周期函數(shù)獲得保留（除了 beforeDestroy 和 destroyed），生命周期混合使用時(shí)：Vue3.x 的生命周期相對(duì)優(yōu)先于 Vue2.x 的執(zhí)行（例：onMounted 先于 mounted 執(zhí)行）豁状。
當(dāng)生命周期混用時(shí)捉偏，主版本的鉤子函數(shù)就會(huì)相對(duì)優(yōu)先執(zhí)行。為了產(chǎn)生不必要的麻煩就不要混用啦泻红。
