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