vue生命周期鉤子詳解（Vue 3版本）

一、生命周期階段劃分

Vue組件的生命周期可分為四大階段，每個階段對應特定鉤子函數：

1. 創建階段：初始化實例并準備數據
2. 掛載階段：將虛擬DOM渲染為真實DOM
3. 更新階段：響應數據變化并重新渲染
4. 銷毀階段：清理資源并終止組件

二、核心鉤子函數及用途

import { ref, onMounted, onUnmounted } from 'vue';export default {setup() {const count = ref(0);// 創建階段onMounted(() => {console.log('組件已掛載，可操作DOM'); // [1,4,9](@ref)});// 更新階段watchEffect(() => {console.log('數據更新，執行副作用'); // [1,4](@ref)});// 銷毀階段onUnmounted(() => {clearInterval(count.value); // [4,9](@ref)});return { count };}
};

1. 創建階段

• onMounted：組件掛載完成后觸發，適合初始化第三方庫、DOM操作

  onMounted(() => {const element = document.getElementById('app');element.style.color = 'red'; // [4,6](@ref)
  });

• onBeforeMount：掛載開始前觸發，用于模板預處理（Vue 3新增）

2. 掛載階段

• onRenderTracked：響應式依賴被追蹤時觸發（組合式API獨有）

  onRenderTracked((event) => {console.log('依賴變化:', event.key); // [1,4](@ref)
  });

3. 更新階段

• onBeforeUpdate：數據更新但DOM未重繪前觸發

  onBeforeUpdate(() => {console.log('數據即將更新'); // [4,9](@ref)
  });

• onUpdated：DOM更新完成后觸發

  onUpdated(() => {console.log('DOM已更新'); // [4,9](@ref)
  });

4. 銷毀階段

• onBeforeUnmount：組件銷毀前觸發，用于清理工作

  onBeforeUnmount(() => {clearInterval(count.value); // [4,9](@ref)
  });

• onUnmounted：組件完全銷毀后觸發

  onUnmounted(() => {console.log('組件已銷毀'); // [4,9](@ref)
  });

三、使用建議

1. 數據請求：優先在onMounted中發起，避免阻塞渲染

   onMounted(async () => {const data = await fetchData(); // [4,9](@ref)state.value = data;
   });

2. DOM操作：僅在onMounted/onBeforeUpdate中進行

   onMounted(() => {const element = document.getElementById('my-element');element.addEventListener('click', handleClick); // [4,6](@ref)
   });

3. 清理邏輯：必須成對出現（添加/移除事件監聽、清除定時器）

   let timer = null;
   onMounted(() => {timer = setInterval(() => {}, 1000);
   });
   onBeforeUnmount(() => {clearInterval(timer); // [4,9](@ref)
   });

四、注意事項

1. 避免阻塞主線程：不要在生命周期鉤子中執行復雜計算

   // 錯誤示例：onMounted中執行大數據處理
   onMounted(() => {heavyComputation(); // [4,14](@ref)
   });

2. 正確處理異步操作：使用watchEffect或watch監聽數據變化

   watchEffect(() => {const data = await fetchData(count.value); // [1,4](@ref)state.value = data;
   });

3. 父子組件生命周期順序：

   父 beforeMount -> 子 beforeMount -> 子 mounted -> 父 mounted
   父 beforeUnmount -> 子 beforeUnmount -> 子 unmounted -> 父 unmounted

4. 組合式API注意事項：
   • onMounted等鉤子必須在setup函數內調用
   • 響應式數據需通過ref或reactive聲明

   // 錯誤示例：未聲明響應式數據
   setup() {onMounted(() => {console.log(nonRefData); // undefined});
   }

五、與React useEffect對比

Vue 生命周期	React useEffect	適用場景
onMounted	useEffect(() => {}, [])	組件掛載后執行一次性操作
onBeforeUpdate	useEffect(() => {}, [data])	數據更新前執行邏輯
onUnmounted	useEffect的清理函數	組件銷毀前清理資源

通過合理利用生命周期鉤子，開發者可以精確控制組件的行為，提升代碼可維護性和性能。在實際開發中，建議結合組合式API的watchEffect和watch實現更細粒度的響應式處理，同時嚴格遵循"掛載前/后"、"更新前/后"的操作規范，避免常見的內存泄漏和競態條件問題。