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中内置组件，无须引入或者下载插件，直接可以引用，且可以保存组件的状态不被销毁，从而保证组件中所有的内容状态得以保留。