vue3 KeepAlive

在Vue.js 3中，<keep-alive> 是一个抽象组件，用于保留其子组件状态，防止在切换组件时销毁它们。这对于在页面间切换时保留组件的状态或避免重复渲染特定组件非常有用。<keep-alive> 主要用于缓存组件，以提高性能和用户体验。

以下是一个简单的例子，演示了如何在Vue.js 3中使用 <keep-alive>：

vue

 

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    
    <keep-alive>
      <component :is="currentComponent" />
    </keep-alive>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';

export default {
  data() {
    return {
      currentComponent: 'FirstComponent',
    };
  },
  components: {
    FirstComponent,
    SecondComponent,
  },
  methods: {
    toggleComponent() {
      this.currentComponent = (this.currentComponent === 'FirstComponent') ? 'SecondComponent' : 'FirstComponent';
    },
  },
};
</script>

在这个例子中：

• <keep-alive> 包裹了一个 <component> 元素，该元素使用动态组件 :is 属性根据 currentComponent 的值渲染不同的子组件。
• 当用户点击 "Toggle Component" 按钮时，currentComponent 的值会切换，导致 <component> 内部的组件切换。

由于 <keep-alive> 的存在，切换时不会销毁被缓存的组件实例，而是将其状态保留在缓存中。这样，在切换回已缓存的组件时，组件不会重新创建，而是从缓存中恢复，从而提高性能和避免不必要的渲染。

需要注意的是，被 <keep-alive> 缓存的组件需要实现 activated 和 deactivated 生命周期钩子，以便在组件被激活和失活时执行特定的逻辑。这些生命周期钩子允许你在组件被缓存和激活之间执行额外的操作。

<keep-alive> 的生命周期顺序如下：

1. 第一次渲染（缓存中没有组件实例）：

   • beforeCreate
   • created
   • beforeMount
   • mounted

2. 组件被缓存（不活动状态）：

   • deactivated

3. 组件被激活（再次显示在页面上）：

   • activated

4. 组件被销毁：

   • 如果内存不足或缓存大小限制达到，<keep-alive> 可能会销毁某些缓存的组件实例。在这种情况下，被销毁的组件会触发 beforeDestroy 和 destroyed 生命周期钩子。

总体来说，activated 生命周期钩子用于在组件从缓存中取出并重新激活时执行一些操作，而 deactivated 生命周期钩子用于在组件被缓存时执行一些操作。这样，你可以在这些生命周期钩子中处理状态的保存和恢复，以确保组件在被缓存和激活之间保持一致的状态。