摘要

onMounted, onUpdated, onUnmounted 是組合式 API 中最常用的三個生命週期鉤子，分別對應元件的「已掛載」、「已更新」和「已卸載」階段。

定義與說明

onMounted：在元件初次渲染完成並掛載到 DOM 樹上後呼叫。是執行需要存取 DOM 的初始化操作（如第三方函式庫初始化）或獲取伺服器資料的最佳時機。

onUpdated：在元件因響應式狀態變更而更新其 DOM 樹之後呼叫。可以用於在 DOM 更新後執行某些操作。

onUnmounted：在元件實例被卸載和銷毀之前呼叫。是進行所有必要清理工作的最後機會，例如清除 setInterval 計時器或移除手動建立的事件監聽器。

實作範例

生命週期鉤子示例

<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';
const count = ref(0);
onMounted(() => console.log('掛載完成'));
onUpdated(() => console.log('DOM 已更新'));
onUnmounted(() => console.log('卸載完成'));
</script>
<template>
  <button @click="count++">計數: {{ count }}</button>
</template>

結論

掌握 onMounted (用於初始化), onUpdated (用於響應更新), 和 onUnmounted (用於清理) 這三個核心鉤子，就能處理絕大多數元件的生命週期管理需求。

onMounted onUpdated onUnmounted