Vue 3 的 keep-alive 及生命周期钩子

在 Vue 3 中，keep-alive 是一个内置组件，用于提高性能和减少不必要的组件销毁与重建。它与组件的生命周期紧密相关，特别是在动态组件和路由切换场景下，能够缓存组件的状态并避免重新渲染。

而 onActivated 和 onDeactivated 是 Vue3 Composition API 提供的钩子函数，专门用于处理被 keep-alive 缓存组件的激活和销毁逻辑。

1. keep-alive

1.1 什么是 keep-alive？

在 Vue 中，keep-alive 是一个内置的高阶组件，用于缓存不再活跃的组件实例，使其在不再渲染时依然保留状态。通过，在需要频繁切换视图组件或动态组件时使用 keep-alive，这样可以避免频繁销毁和重新创建组件，从而提高性能。

eg：很多情况下，当在多个选项卡或页面之间切换时，可能会希望保留每个选项卡的状态，而不是每次切换时都销毁再重新加载它们。此时，keep-alive 就可以解决这个问题。

1.2 基本使用

keep-alive 可以包裹动态组件或页面，当使用时，它会缓存已渲染的组件，并将其状态保持在内存中。当组件再次被激活时，keep-alive 会复用该组件的实例，而不是重新创建一个新的组件。

🌰 子组件 A + B 类似

<template><div><h2>这是组件A</h2><p>这是组件A的内容</p></div>
</template><script>
export default {name: 'ComponentA',mounted() {console.log('ComponentA 被挂载');},unmounted() {console.log('ComponentA 被卸载');},
};
</script>

App. vue

<template><div><button @click="switchComponent">切换组件</button><keep-alive><component :is="currentComponent"></component></keep-alive></div>
</template><script>
import { defineComponent, ref } from 'vue';
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';export default defineComponent({name: 'App',setup() {// 当前渲染的组件，直接引用组件const currentComponent = ref(ComponentA);// 切换组件的逻辑const switchComponent = () => {currentComponent.value = JSON.stringify(currentComponent.value) === JSON.stringify(ComponentA) ? ComponentB : ComponentA;};return {currentComponent,switchComponent,};},
});
</script>

展示如下：

点击切换

切换后，A 组件被缓存而不是被销毁，再次切换回来 B 组件被缓存，A 组件重新渲染。

如果不使用 keep-alive 表现为：

<template><div><button @click="switchComponent">切换组件</button><component :is="currentComponent"></component></div>
</template>

组件先被销毁然后创建。

小 Tip 1

下面写法展示组件失败，为什么呢？

根本原因是，在 setup() 中使用的是字符串 'ComponentA' 和 'ComponentB'，而在 keep-alive 和 component 组件的 :is 属性中，Vue 期望的是组件本身，而不是它的字符串名称。

因此需要将 currentComponent 的值设置为组件的引用。

javascript">export default defineComponent({name: 'App',setup() {// 当前渲染的组件const currentComponent = ref('ComponentA');// 切换组件的逻辑const switchComponent = () => {currentComponent.value = currentComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA';};return {currentComponent,switchComponent,};},
});

小 Tip 2

上面图片右侧控制台出现黄色警告⚠️，说明在 ref 中存储了一个 Vue 组件实例的响应式对象，而 Vue 会自动将其变成响应式，这可能会带来性能问题，为了避免这个情况，Vue 建议使用 markRaw 或 shallowRef 避免组件变成响应式对象。

解决方法

1、使用 markRaw

markRaw 会阻止 Vue 对传入对象进行响应式处理，它是 Vue 提供的一个优化方法，适用于那些不需要响应式处理的对象（比如组件）。

javascript">// 使用 markRaw 来避免组件变成响应式
const currentComponent = ref(markRaw(ComponentA));

2、使用 shallowRef（推荐）

shallowRef 是 Vue 3 提供的一个 API，类似于 ref，但它只会让引用的对象本身变得响应式，而不会递归地将对象中的嵌套属性变成响应式。对于 Vue 组件，使用 shallowRef 会更加合适，因为我们只关心组件本身的引用，而不需要其内部的响应式。

javascript">// 使用 shallowRef 来避免组件变成深度响应式
const currentComponent = shallowRef(ComponentA);

1.3 include 和 exclude 属性

keep-alive 还提供了 include 和 exclude 属性，用于控制哪些组件应该被缓存，哪些组件不应该被缓存。

- include：一个字符串、正则表达式或数组，指定哪些组件应该被缓存。

- exclude：一个字符串、正则表达式或数组，指定哪些组件不应该被缓存。

🌰

<template><div><button @click="switchComponent">切换组件</button><keep-alive :include="['ComponentA']" :exclude="['ComponentB']"><component :is="currentComponent"></component></keep-alive></div>
</template>
<script>
import { defineComponent, shallowRef } from 'vue';
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';export default defineComponent({name: 'App',setup() {const currentComponent = shallowRef(ComponentA);const switchComponent = () => {currentComponent.value = JSON.stringify(currentComponent.value) === JSON.stringify(ComponentA) ? ComponentB : ComponentA;};return {currentComponent,switchComponent,};},
});
</script>

只有 ComponentA 会被缓存，ComponentB 不会。根据实际需要灵活控制哪些组件需要被缓存。

2. 钩子函数

2.1 onActivated

onActivated 钩子会在组件被缓存并重新激活时触发。通常情况下，组件被 keep-alive 缓存后，如果用户切换到该组件，Vue 会复用这个组件的实例并调用 onActivated 钩子。

使用场景：需要在组件激活时重新加载数据、执行某些操作（eg：开启动画、更新状态等）。

2.2 onDeactivated

与 onActivated 类似，onDeactivated 会在组件被缓存并从 keep-alive 中移除时触发。此时，组件的状态会被保留，但它的 DOM 和实例会被销毁，当再次激活时，onActivated 会重新触发。

使用场景：需要在组件去激活时清理资源，例如停止计时器、清理事件监听器等。或进行一些状态重置操作。

2.3 🌰

注意：这两个钩子函数只有在组件被 <keep-alive> 包裹，且组件经历过激活和停用的过程，也就是组件需要在显示和隐藏之间切换，而不是一直保持显示状态。

子组件

<template><div><h3>子组件</h3></div>
</template><script setup>
import { onActivated, onDeactivated } from 'vue';// 在组件激活时重新加载数据
onActivated(() => {console.log('组件被激活，重新加载数据');
});// 在组件停用时清理数据
onDeactivated(() => {console.log('组件被停用，清理数据或停止操作');
});
</script>

App.vue

<template><div><keep-alive><Info v-if="isActive" /></keep-alive><button @click="toggleActive">切换显示</button></div>
</template><script setup>
import { ref } from 'vue';
import Info from './components/Info.vue';const isActive = ref(true);const toggleActive = () => {isActive.value = !isActive.value;
};
</script>

展示为：

小 Tip 3

上面🌰使用 v-if 控制组件的显示和隐藏，如果使用 v-show 呢？

<template><div><button @click="toggleActive">切换组件显示</button><keep-alive><UserInfo v-show="isActive" /></keep-alive></div>
</template>

结果是：不会触发。

如果使用 v-show 控制组件显示和隐藏，不会触发两个钩子的执行，因为其是通过修改 display 属性来显示或隐藏 DOM 元素，而不会销毁和重新渲染组件。

2.4 存在问题

1、缓存时的副作用

当组件被缓存时，它的状态会保留在内存中，不会被销毁。如果需要清理某些副作用（例如，清理计时器、停止网络请求等），应该在 onDeactivated 中进行处理。

javascript">onDeactivated(() => {// 停止任何异步任务或计时器clearInterval(someTimer)console.log('停止异步任务')
})

2、性能问题

如果 onActivated 钩子执行了某些耗时操作（如数据请求、定时任务等），可能会影响用户体验。为了避免影响性能，可以在 onActivated 中进行懒加载操作，只在需要时执行某些任务。

javascript">onActivated(() => {if (!info.value) {fetchData()  // 如果没有数据才加载}
})

3. keep-alive 与路由结合

3.1 在 Vue 路由中使用 keep-alive

Vue 路由通常与 keep-alive 一起使用，特别是在单页面应用（SPA）中。当切换路由时，希望某些页面保持活跃并缓存其状态。keep-alive 可以用来缓存路由视图组件，避免在路由切换时销毁和重新渲染。

<template><keep-alive><router-view></router-view></keep-alive>
</template><script>
export default {// 使用 keep-alive 包裹 router-view，使得路由切换时组件能够缓存
};
</script>

router-view 是 Vue 路由用于渲染当前匹配的路由组件，keep-alive 缓存路由组件，当路由切换时，之前的组件不会被销毁，而是保持活跃并缓存状态。

3.2 动态路由

keep-alive 的 include 和 exclude 属性可以用来动态控制哪些路由视图组件应该被缓存，哪些不应该被缓存。

<template><div><h1>动态路由和 keep-alive</h1><keep-alive :include="['Home', 'About']"><router-view></router-view></keep-alive></div>
</template><script>
export default {data() {return {// 只有 Home 和 About 组件会被缓存}},
}
</script>

路由配置：

javascript">import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';const routes = [{path: '/',name: 'Home',component: Home,},{path: '/about',name: 'About',component: About,},{path: '/contact',name: 'Contact',component: Contact,},
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

同理：

<keep-alive :exclude="['Contact']"><router-view></router-view>
</keep-alive>

根据具体情况来控制缓存策略，从而有效提升性能，并节省内存。

总结：使用 keep-alive 时，路由切换时被缓存的组件会保持其状态。例如，表单输入的数据、滚动位置等都不会丢失。为了确保在缓存组件时能保持状态，可以使用 onActivated 和 onDeactivated 钩子函数执行一些操作。