vue中keep-alive组件的使用

keep-alive是vue的内置组件，它的主要作用是对组件进行缓存，避免组件在切换时被重复创建和销毁，从而提高应用的性能和用户体验。它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。使用时，只需要将需要缓存的组件包裹在keep-alive标签内即可。

使用

首先声明两个组件keepCompont1.vue，keepCompont2.vue

<template><div><p>这是 keepCompont1</p><input v-model="inputValue" placeholder="输入内容"></div></template><script>export default {data() {return {inputValue: ''};},created() {console.log('keepCompont1 created');},mounted() {console.log('keepCompont1 mounted');},activated() {console.log('keepCompont1 activated');},deactivated() {console.log('keepCompont1 deactivated');},destroyed() {console.log('keepCompont1 destroyed');}};</script><style scoped></style>

<template><div><p>这是 keepCompont2</p><input v-model="inputValue" placeholder="输入内容"></div></template><script>export default {data() {return {inputValue: ''};},created() {console.log('keepCompont2 created');},mounted() {console.log('keepCompont2 mounted');},activated() {console.log('keepCompont2 activated');},deactivated() {console.log('keepCompont2 deactivated');},destroyed() {console.log('keepCompont2 destroyed');}};</script><style scoped></style>

生命周期里面打印了信息来确认那些生命周期执行了，activated和deactivated是keep-alive组件特有的生命周期，组件被激活执行activated，组件隐藏的时候执行deactivated。对于vue生命周期不理解的可以看下这里，详细说了下生命周期的作用和执行顺序。vue生命周期和应用

父组件代码：

<template><div><button @click="toggleComponent">切换组件</button><keep-alive ><!-- is绑定的值即为当前显示的组件，需要切换的时候需要动态绑定。  --><component :is="currentComponent"></component></keep-alive></div>
</template><script>
import keepCompont1 from "@/components/keepCompont1.vue";
import keepCompont2 from "@/components/keepCompont2.vue";
export default {components: {keepCompont1,keepCompont2,},data() {return {// 默认显示keepCompont1组件currentComponent: "keepCompont1",};},methods: {// 修改currentComponent的值来切换组件toggleComponent() {//  this.currentComponent === 'keepCompont2' ? 'keepCompont1' : 'keepCompont2'; //  三元运算符做了一个判断 //  this.currentComponent === 'keepCompont2'为true //  则把keepCompont1 赋值给this.currentComponent。false则把keepCompont2赋值过去this.currentComponent = this.currentComponent === 'keepCompont2' ? 'keepCompont1' : 'keepCompont2';},},
};
</script>

运行效果：

当页面加载完成后可以看到keepCompont1组件的created，mounted，activated生命周期函数执行了。

keepCompont1组件的输入框输入内容1111,点击切换按钮。keepCompont2组件显示出来且created，mounted，activated生命周期函数执行且keepCompont1组件隐藏了且执行了deactivated

然后我们来验证keepCompont1组件刚才输入的内容1111 是否缓存上了，这里在组件2的输入框里面输入222，然后点击切换按钮。

切换回来后可以看到输入框里面的1111还在，并且从打印的生命周期上可以看到destroyed钩子函数并没有执行也就是说没有销毁在重新创建组件。在次点击切换按钮可以看到组件2里面的2222也是存在的。整个过程destroyed钩子函数都没有执行

keep-alive组件有三个常用的属性：include，exclude，max

include

include值为字符串或正则表达式，只有名称匹配的组件会被缓存，如果不使用include属性则默认缓存所有。这里在创建一个keepCompont3组件，内容和keepCompont1和keepCompont2一样的唯一区别就是修改下生命周期的打印，这里就不在粘贴重复的代码了。稍微修改下父组件

<template><div><button @click="toggleComponent">切换组件</button><!-- 添加一个按钮 用来显示组件3 --><button @click="show3">显示组件3</button><keep-alive include="keepCompont1,keepCompont2"><!-- is绑定的值即为当前显示的组件，需要切换的时候需要动态绑定。  --><component :is="currentComponent"></component></keep-alive></div>
</template><script>
import keepCompont1 from "@/components/keepCompont1.vue";
import keepCompont2 from "@/components/keepCompont2.vue";
import keepCompont3 from "@/components/keepCompont3.vue";
export default {components: {keepCompont1,keepCompont2,keepCompont3},data() {return {// 默认显示keepCompont1组件currentComponent: "keepCompont1",};},methods: {// 修改currentComponent的值来切换组件toggleComponent() {// this.currentComponent === 'keepCompont2' ? 'keepCompont1' : 'keepCompont2'; 三元运算符做了一个判断 //  this.currentComponent === 'keepCompont2'为true 则把keepCompont1 赋值给this.currentComponent。// false则把keepCompont2赋值过去this.currentComponent = this.currentComponent === 'keepCompont2' ? 'keepCompont1' : 'keepCompont2';},show3(){this.currentComponent = 'keepCompont3'}},
};
</script>

这里include没有包含keepCompont3组件，当组件3隐藏在出现的时候不会缓存输入框里面的值，因为组件被销毁了，执行了destroyed生命周期函数

这里可以看到当最后进入组件3的时候，组件3的created钩子函数也执行了，说明组件又重新创建了。

exclude

值为字符串或正则表达式，名称匹配的组件不会被缓存。

 <keep-alive include="keepCompont1,keepCompont2,keepCompont2" exclude="keepCompont2"><!-- is绑定的值即为当前显示的组件，需要切换的时候需要动态绑定。  --><component :is="currentComponent"></component></keep-alive>

运行效果