關於 mount 生命週期


Posted by hoyi-23 on 2021-08-07

不管是 初始化一個元件 或是 一個 Vue App,都是有生命週期的。
每個Vue的實體物件,事實上就是一個元件,而每個元件從建立到被銷毀,都是某個週期階段。

生命週期 & Hooks Function

在生命週期中,Vue.js 提供給開發者在每個週期階段可以做對應處理的 CallBack Function,這些 CallBack Function 稱為 Hooks Function。
vue3的composition已經不需要使用beforeCreate和created,但如果真的需要,可以在setup的區段內外來處理

Hooks Function 在Vue3 composition API
的對應名稱
說明
beforeCreate() setup() Vue初始化時期
這邊的動作會在vue導入期就被執行
此階段還拿不到Vue Data
也沒有辦法使用vue裡面的Methods, Watch, Computed等。
created() setup() Vue已被建立
可以拿到Vue Data, Function, Watch, Computed...等
但網頁內容HTML還沒準備好)
beforeMount() onBeforeMount() 已經載入原始HTML至Virtual DOM
但內容尚未透過Vue進行渲染。
mounted() onMounted() 已經透過Vue進行渲染HTML
並且取代原本的元素內容。
這個時候可以進行一些HTML的操作
beforeUpdate() onBeforeUpdate() 當狀態被變動時,畫面同步更新前
updated() onUpdated() 當狀態被變動時,畫面同步更新完成
beforeDestroy()-2.x x Vue實體被銷毀前
beforeUnmount()-3.0 onBeforeUnmount() Vue實體被銷毀前
destoryed()-2.x x Vue實體被銷毀完畢
unmounted()-3.0 onMounted() Vue實體被銷毀完畢
errorCaptured() onErrorCaptured() 子/孫元件的錯誤被捕獲時觸發
activated() x Vue元件被啟動觸發時,須搭配keep-alive
deactivated() x Vue元件被解除觸發時,須搭配keep-alive
  1. Hook Function 不能加在 methods屬性內,且由於需要透過this存取實體,所以與methods一樣不能使用箭頭函式。
  2. 如果要使用 AJAX,至少要到created後才能使用
  3. 想要維持資料狀態,需要使用<keep-alive>


#mount #生命週期







Related Posts

原子習慣:法則 1 - 讓提示顯而易見

原子習慣:法則 1 - 讓提示顯而易見

有空的話來學一下 Tailwind CSS - Week 3

有空的話來學一下 Tailwind CSS - Week 3

MTR04_0920

MTR04_0920


Comments