前端必备keep-alive(组件缓存)详解

1.作用:

缓存已经渲染的路由或组件，避免重复渲染

2.常用场景：

• 页面缓存，进入第二页面后，再次返回前页面仍是原状态。
• tab页切换，页面初次加载后，页签切换无需重复加载页面。
• 不活动组件缓存，减少渲染次数

3.特点：

• 组件缓存、状态保持： 保留组件状态或避免重新渲染，具有组件缓存和状态保持特点
• 动态控制： keep-alive提供了include和exclude属性，允许开发者指定需要缓存和不需要缓存的组件。这提供了灵活的控制机制，可以根据需求动态地管理组件的缓存。
• 生命周期钩子： 使用了keep-alive的组件会自动加上activated和deactivated两个生命周期钩子。这两个钩子在组件被激活和停用时分别被调用，允许开发者在这些钩子中执行特定的逻辑，如数据更新、状态恢复等。
• 不渲染DOM元素： keep-alive是一个抽象组件，本身不会渲染一个DOM元素，也不会出现在组件的父组件链上。它仅用于控制组件的缓存和状态保持。

4. 缓存机制的核心：

cache{}： 组件的内部缓存存储依赖于一个名为cache的对象，该对象用于存储被包裹的组件实例。每个组件实例在cache对象中的键是根据组件的名称或 tag 生成的，值是对应的组件实例。当需要渲染一个组件时， 会首先检查cache对象中是否已经存在对应的组件实例。如果存在，直接使用缓存中的实例进行页面渲染；如果不存在，创建一个新的实例，将其加入到cache对象中，然后进行页面渲染。

使用案例：

vue2使用

基本用法

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">Show Component A</button>
    <button @click="currentComponent = 'ComponentB'">Show Component B</button>
	// 缓存组件
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
	// 缓存路由组件
	 <keep-alive>
      <router-view :is="currentComponent"></router-view>
    </keep-alive>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>


// 被缓存的组件
<script>
export default {
  name:'ComponentA',
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

当用户点击按钮切换组件时， 会确保 ComponentA 和 ComponentB 的实例被缓存，而不是被销毁和重新创建。

包含与排除

// 只有 ComponentA 和 ComponentC 会被缓存
<keep-alive include="ComponentA,ComponentC">
  <component :is="currentComponent"></component>
</keep-alive>

// ComponentB 不会被缓存，而其他组件会被缓存
<keep-alive exclude="ComponentB">
  <component :is="currentComponent"></component>
</keep-alive>

生命周期钩子

当组件被 缓存时，它们会触发一些特定的生命周期钩子：

• activated：当组件被激活时调用。
• deactivated：当组件被停用时调用。

<script>
export default {
  activated() {
    console.log('Component is activated');
    // 可以在这里做一些激活时的操作
  },
  deactivated() {
    console.log('Component is deactivated');
    // 可以在这里做一些停用时的操作
  }
};
</script>

vue3使用

需注意在Vue 3中，特别是当使用<script setup> 语法糖时，由于该语法旨在简化Composition API的使用，因此它不直接支持设置组件的name属性。不过，有几种方法可以在<script setup>中设置组件的name，以确保<keep-alive>缓存能够正确生效：

1. 在<script setup>之前或之后添加一个额外的<script>标签：这是目前官方推荐的方法之一。

<script>
export default {
  name: 'MyComponent', // 设置组件名称
  // 其他组件选项
}
</script>

2. 使用defineOptions函数（如果你的Vue版本是3.3或更高）

<script setup lang="ts">
defineOptions({
  name: 'MyComponent', // 设置组件名称
})
</script>

其他与vue2使用相同