vue中keep-alive的使用

什么是keep-alive？

keep-alive是一个内置组件，用于缓存和管理组件的状态。

当 keep-alive包裹一个组件时，这个组件的状态将会被缓存起来，而不是每次重新渲染。这在多个视图之间切换时特别有用，可以避免重复的创建和销毁组件。

实例：

首先写写一个父页面首页：

<template><div><div class="container"><div v-for="(item,index) in boxes" class="app" @click="assion(index)" :key="index" :class="{actives: active === index}">{{item.name}}</div></div><div><keep-alive><inputs v-if="active === 1"></inputs></keep-alive></div></div></div></template><script>import inputs from '@/components/inputs/inputs.vue'export default {comments:{inputs},data() {return {active:-1,boxes: [{name:'首页'},{name:'子页面'},],};},created() {this.assion(0)},methods:{assion(e){this.active=e}},}
</script><style>.container {width: 100%;height:auto;display: flex;}.app{width: 100%;height: auto;display: flex;justify-content: center;}.actives{color: #c9c9c9;}
</style>

使用方式：在需要的保存状态的组件前面加入keep-alive即可

子页面：

<template><div @click="assion" :style="active">{{text}}</div>
</template><script>
export default {data() {return {text:'我是字体',active:{color:''}};},created() {console.log('我创建了')},destroyed() {console.log('我被销毁了')},methods: {assion(){this.text='我变色了'this.active.color='#c9122e'}}
};
</script>

在不加入keep-alive之前：

我们在子页面生命周期销毁阶段加入了打印的方法：

我们发现在没有加入keep-alive之前，每次切换的时候，子页面组件都会触发销毁时输出的“我被销毁了”，并且点击字体时字体的样式都会重新加载，不会保存上次点击时，字体的状态和样式。

加入keep-alive之后就会保存子页面组件的状态，，让它只会触发组件生命周期的创建阶段，而不会触发销毁阶段，从而保证组件中字体状态和样式得以保留，在次切换到子页面时，字体样式和状态都会保存。

如果不明白生命周期原理的朋友，这里是生命周期原理的原理图：

总结：

keep-alive是vue中内置组件，无须引入或者下载插件，直接可以引用，且可以保存组件的状态不被销毁，从而保证组件中所有的内容状态得以保留。