Vue 中的生命周期鉤子函數可以在特定的時間調用，讓你在代碼中添加自定義邏輯。其中之一是 activated 函數。當組件從deactivated狀態變為activated狀態時，Vue 會調用activated函數，而不是created。

activated 函數只在使用 Vue Router 時才會被調用。當該組件渲染為 HTML 并被添加到頁面時， activated 鉤子函數會被觸發。

export default {
activated() {
console.log('Component activated')
}
}

假設我們有兩個組件：A 組件和 B 組件。當 A 組件跳轉到 B 組件時，A 組件將會進入 deactivated 狀態，而 B 組件將會進入 activated 狀態。

<template>
<div>
<router-link to="/b">Jump to component B</router-link>
<component-a />
</div>
</template>
<script>
import ComponentA from './ComponentA.vue'
export default {
components: { ComponentA }
}
</script>

當你在 A 組件中添加了 activated 鉤子函數時，你可以在該函數中添加一些額外的邏輯，以便在該組件被重新激活時執行。例如，你可以請求數據并更新 UI。

export default {
data() {
return {
data: []
}
},
mounted() {
this.fetchData()
},
activated() {
this.fetchData()
},
methods: {
fetchData() {
// 發送請求獲取數據
this.data = [...]
}
}
}