Vue－生命週期

必備知識之一。

簡述

先來看個經典圖：

• beforeCreate 元件未建立，DOM 還沒被編譯（什麼都不能存取）
• created 元件已建立，但 DOM 還沒被編譯（可以存取 Data）
• beforeMount DOM 編譯完成，但還沒 mount 上去（到這邊就可以存取 DOM 了）
• mounted DOM 放到畫面上了。
• beforeUpdate 在重新渲然之前
• updated 重新渲染到畫面上以後
• beforeUnmount unmount 以前
• unMounted unmount 以後

附註：

• 打 API 通常會在 mounted 或是更之前的 hook，而 beforeUnmount 就是 clean function
• 在 lifecycle hook 中可以直接透過 this 來取得 props，不需要透過 this.$props
• 有更新到「畫面」才會進到 update 區塊，只是更新 data 的話不會

範例

• mounted & updated