---

一、什么是onMounted和onUnmounted？

Vue 3.0帶來了許多令人興奮的新特性和改進，其中包括更強大的組合式API。在這篇文章中，我們將重點介紹Vue 3.0中兩個重要的組件生命周期鉤子函數：onMounted和onUnmounted。這兩個鉤子函數可以幫助我們更好地管理組件的生命周期和行為。

onMounted和onUnmounted是Vue 3.0中的兩個新的組件生命周期鉤子函數。它們分別在組件掛載后和組件卸載前執行。這些鉤子函數可以用來執行一些特定的邏輯，例如初始化數據、訂閱事件、啟動定時器等。

二、如何使用onMounted和onUnmounted？

讓我們來看看如何在Vue 3.0中使用這兩個鉤子函數。

1、使用onMounted

<template><div><h1>{{ message }}</h1></div>
</template><script setup>
import { ref, onMounted } from 'vue'const message = ref('Hello, Vue 3!')onMounted(() => {console.log('組件已掛載')// 在組件掛載后執行的邏輯，例如初始化數據、訂閱事件等
})
</script>

在上面的例子中，我們使用onMounted鉤子函數在組件掛載后執行了一些邏輯，這里只是簡單地打印了一條消息到控制臺。你可以在這個鉤子函數中執行任何需要在組件掛載后立即執行的邏輯。

2、使用onUnmounted

<script setup>
import { ref, onUnmounted } from 'vue'const timerId = ref(null)onUnmounted(() => {console.log('組件將被卸載')// 在組件卸載前執行的邏輯，例如清除定時器、取消訂閱等if (timerId.value) {clearInterval(timerId.value)}
})const startTimer = () => {timerId.value = setInterval(() => {console.log('定時器執行中')}, 1000)
}
</script>

在上面的例子中，我們使用onUnmounted鉤子函數在組件即將被卸載前執行了一些邏輯，這里清除了一個定時器。你可以在這個鉤子函數中執行任何需要在組件卸載前執行的清理操作，例如取消訂閱、關閉WebSocket連接等。

三、總結

在本文中，我們學習了Vue 3.0中的onMounted和onUnmounted鉤子函數，并看了一些簡單的示例。這兩個鉤子函數為我們提供了更加靈活和強大的組件生命周期管理方式，使得我們能夠更好地控制組件的行為和資源的釋放。希望本文能夠幫助你更好地理解和應用Vue 3.0中的組合式API。