介绍vue3的钩子函数activated和deactivated使用场景

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钩子函数恢复组件状态或执行一些初始化操作。