activated和deactivated是Vue3中的两个生命周期钩子函数。
activated钩子函数在组件被激活时调用，通常用于恢复组件的状态或执行一些初始化操作。例如，如果一个组件被从路由中激活，你可能需要在该组件被激活时从本地存储中加载一些数据。
下面是一个示例代码：
<template>
<div>
<button @click="loadData">Load Data</button>
<ul>
<li v-for="item in data" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import { reactive } from 'vue'
import axios from 'axios'
export default {
setup() {
const state = reactive({
data: [],
loading: false,
error: null,
})
const loadData = () => {
state.loading = true
state.error = null
axios.get('/api/data').then(response => {
state.data = response.data
state.loading = false
}).catch(error => {
state.loading = false
state.error = error.message
})
}
const onActivated = () => {
loadData() // 加载数据并初始化组件状态
}
const onDeactivated = () => {
// 清理组件状态或取消异步请求等操作
}
return {
state,
loadData,
onActivated,
onDeactivated,
}
},
mounted() {
this.onActivated() // 在组件挂载时激活该组件，调用onActivated钩子函数初始化组件状态
},
activated() {
return { onActivated } // 在组件被激活时调用onActivated钩子函数，恢复组件状态或执行一些初始化操作
},
deactivated() {
return { onDeactivated } // 在组件被停用时调用onDeactivated钩子函数，清理组件状态或取消异步请求等操作
},
}
</script>
在上面的示例代码中，当用户点击“Load Data”按钮时，会触发loadData函数，从服务器获取数据并更新组件状态。当用户访问其他路由时，该组件会被停用，此时会调用onDeactivated钩子函数清理组件状态或取消异步请求等操作。当用户再次访问该组件所在的路由时，该组件会被激活，此时会调用onActivated钩子函数恢复组件状态或执行一些初始化操作。