Vue 的生命周期是什麼？

什麼是生命周期？

Vue 組件從建立到銷毀的整個過程，稱為生命周期。Vue 在不同階段會自動呼叫對應的生命周期鉤子（Lifecycle Hooks），讓我們可以在特定時機執行自訂邏輯。

Vue 3 生命周期鉤子

鉤子	說明
setup()	最早執行，Composition API 的入口，相當於 beforeCreate + created
onBeforeMount	掛載前，DOM 尚未建立
onMounted	掛載完成，可以操作 DOM、發送 API 請求
onBeforeUpdate	資料更新前，DOM 尚未重新渲染
onUpdated	資料更新、DOM 重新渲染完成
onBeforeUnmount	組件銷毀前，清理定時器、事件監聽器的時機
onUnmounted	組件已完全銷毀

Vue 3 Composition API 用法

import { onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('組件已掛載，可操作 DOM')
      // 發送 API 請求
    })

    onBeforeUnmount(() => {
      console.log('組件即將銷毀，清理副作用')
      // clearInterval、removeEventListener 等
    })
  }
}

Vue 2 vs Vue 3 對照

Vue 2	Vue 3 (Composition API)
beforeCreate	setup() 取代
created	setup() 取代
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

常見面試考點

• 最常使用的鉤子：onMounted（發 API、操作 DOM）和 onBeforeUnmount（清理副作用）
• 父子組件的生命周期順序：父 beforeMount → 子 mounted → 父 mounted