Vue2：缓存组件keep-alive

keep-alive

动态组件的切换，切换后是不会缓存之前被切换掉的组件的，每次切换新组件的时候，Vue 都创建了一个新的组件对象。

有时候我们希望在A组件时用户做了一些操作，切换B组件时做了一些操作，当切回A组件时希望记住A的操作，不要重新创建A组件，keep-alive可以缓存动态切换的组件

 

失活的组件将会被缓存

<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

 

供有include 和exclude 属性决定哪些组件可以被缓存（字符串或正则表达式）

max 最多缓存

<keep-alive :include="/a|b/" :max="2"> 
//多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

例：

<template>
    <div>
　　　　　<button @click="mytemp='Box1'">1</button>
        <button @click="fn('Box2')">2</button>
        <button @click="mytemp='Box3'">3</button>
        
        <keep-alive>
            <component v-bind:is="mytemp"></component>
        </keep-alive>
    </div>
</template>

<script>
    import Box1 from "./Box1.vue"
    import Box2 from "./Box2.vue"
    import Box3 from "./Box3.vue"
    export default {
        data() {
            return {
                arr: [true, false, false],
                mytemp: "Box1"
            }
        },
        components: {
            Box1,
            Box2,
            Box3
        },
        methods: {
            fn(index) {
                this.mytemp = index
            }
        }


    }
</script>

<style>
</style>