Vue2.x

你不能使用箭頭函數(shù)來定義一個生命周期方法??！因為this啥也找不到還報錯！

beforeCreate

在實例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前執(zhí)行，此時組件實例還未創(chuàng)建，通常用于插件開發(fā)中執(zhí)行一些初始化任務。

created

組件實例已經(jīng)創(chuàng)建完成，并配置了數(shù)據(jù)觀測 (data observer)，property 和方法的運算，watch/event 事件回調(diào)。但是還沒有掛載DOM，此階段可用于異步數(shù)據(jù)獲取。

beforeMount

在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。

mounted

組件實例被掛載后完成，DOM已創(chuàng)建，此階段可用于訪問數(shù)據(jù)和DOM元素，但不會保證所有子組件都一起被掛載。如果您希望整個視圖都完成渲染可以在 mounted 內(nèi)部使用 vm.$nextTick

beforeUpdate

數(shù)據(jù)更新前調(diào)用，可用于獲取更新前的狀態(tài)。可在這里 手動移除已經(jīng)添加的事件監(jiān)聽器。

updated

此函數(shù)執(zhí)行的時候。DOM已經(jīng)更新。

updated 不會保證所有的子組件也都一起被重繪。如果你希望等到整個視圖都重繪完畢，可以在 updated 里使用 vm.$nextTick

beforeDestroy

實例銷毀之前調(diào)用。在這一步，實例仍然完全可用，此時可以取消定時器和訂閱事件。

除了beforeCreate、created外其他生命周期鉤子函數(shù)在服務器端渲染期間均不被調(diào)用。

官網(wǎng)大圖鎮(zhèn)樓：

生命周期圖示

Vue3

因為鉤子函數(shù)們依賴內(nèi)部的全局狀態(tài)來定位當前的組件實例，所以他們只能在 setup() 期間注冊及使用。

import { onMounted, onUpdated, onUnmounted } from 'vue'

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  },
}

• 與2.x的對比（兩個被替換了，其余的就是改了個名）
  • beforeCreate、created由setup()代替。
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

• 新增了2個方便調(diào)試 debug 的回調(diào)鉤子（為了不誤導請前往官方文檔）

Vue2.x + Composition API 與 Vue3.x

• 在 Vue2.x + Composition API的環(huán)境下，進行兩者鉤子函數(shù)混用時：Vue2.x 的回調(diào)函數(shù)會相對先執(zhí)行（例：mounted 先于 onMounted執(zhí)行）

• 在 Vue3.x 環(huán)境下，為了兼容 Vue2.x 的語法，全部舊的生命周期函數(shù)獲得保留（除了 beforeDestroy 和 destroyed），生命周期混合使用時：Vue3.x 的生命周期相對優(yōu)先于 Vue2.x 的執(zhí)行（例：onMounted 先于 mounted 執(zhí)行）。

當生命周期混用時，主版本的鉤子函數(shù)就會相對優(yōu)先執(zhí)行。為了產(chǎn)生不必要的麻煩就不要混用啦。