vue3.0中keep- alive生命周期使用

在 Vue 3.0 中，`keep-alive` 组件的生命周期钩子函数与 Vue 2.x 版本基本一致，但是由于 Vue 3.0 中对于组件实例的创建和销毁方式进行了优化，因此需要注意一些细节。

`keep-alive` 组件的生命周期包括 `activated` 和 `deactivated` 两个钩子函数。当 `keep-alive` 组件中的子组件被激活时，`activated` 钩子函数会被调用；当 `keep-alive` 组件中的子组件被停用时，`deactivated` 钩子函数会被调用。

下面是一个示例：

<template>
  <div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  activated() {
    console.log('activated')
  },
  deactivated() {
    console.log('deactivated')
  }
}
</script>

在这个示例中，我们使用了 `keep-alive` 组件来缓存某些路由页面。其中，`activated` 和 `deactivated` 钩子函数用于在缓存的页面被激活或停用时进行相应的操作，例如发送网络请求、更新数据等。

需要注意的是，由于 Vue 3.0 中对于组件实例的创建和销毁方式进行了优化，因此 `keep-alive` 组件中的子组件在被缓存时，并不会被销毁。因此，`keep-alive` 组件中的子组件不会触发 `created` 和 `beforeDestroy` 钩子函数，而是只会触发 `activated` 和 `deactivated` 钩子函数。