Vue3被keep-alive缓存的组件被销毁时数据重新加载

当使用 `keep-alive` 缓存组件时，Vue 会将该组件的实例保存在缓存中，而不是将其销毁。当组件被缓存时，它的生命周期钩子函数 `created` 和 `mounted` 仅会在第一次渲染时执行，而后续的切换只会触发 `activated` 和 `deactivated` 钩子函数。

如果您希望在组件被重新激活时重新加载数据，则可以在 `activated` 钩子函数中重新加载数据。例如：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    console.log('created');
    this.loadData();
  },
  activated() {
    console.log('activated');
    this.loadData();
  },
  methods: {
    loadData() {
      // 发送异步请求获取数据
      // 然后更新数据
      this.message = 'Data loaded successfully';
    },
    updateMessage() {
      this.message = 'Updated message';
    }
  }
};
</script>

在上面的示例中，`loadData` 方法用于加载数据，`created` 钩子函数和 `activated` 钩子函数都会调用 `loadData` 方法来加载数据，从而实现在组件被重新激活时重新加载数据。