生命週期有選項式跟組件式兩種寫法，語法都不同，這邊介紹選項式的語法。
當在定義元件時，會將它們作為一個屬性或選項加入到匯出物件中，其值是一個函數。使用時寫出名字，並在後面加上 () 和 {} 來定義您想執行的程式碼區塊。

建立

創建前 beforeCreate

說明：
實例剛初始化，此時 data 或 event 配置尚未建立。
常見用途：
通常不使用。

已創建 created

說明：
實例建立完成。響應式資料 (data, computed, props) 已初始化完成。
常見用途：
適合進行非同步資料請求 (Fetch API)。

掛載

掛載前 beforeMount

說明：
模板編譯完成，但尚未掛載到 DOM。
常見用途：
無法存取實際的 DOM 元素。

已掛載 mounted

說明：
元件完成初始渲染並掛載到 DOM。
常見用途：
此時可以存取和操作實際的 DOM 節點。

更新

更新前 beforeUpdate

說明：
響應式資料變更導致元件即將重新渲染前觸發。
常見用途：
適合在更新前移除事件監聽器。

已更新 updated

說明：
元件重新渲染並更新 DOM 後觸發。
常見用途：
此時可以執行依賴 DOM 的操作，但不應修改狀態避免無限迴圈。

銷毀

銷毀前 beforeUnmount

說明：
元件實例被卸載前調用。
常見用途：
適合清理定時器、事件監聽器、關閉 WebSocket 連接等副作用。

已銷毀 unmounted

說明：
元件實例已完全從 DOM 卸載。
常見用途：
所有綁定和事件監聽器已被移除。