Vue动态组件配合keep-alive实现状态缓存

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。看下面这张图

ezgif-4-d5fd12951ae2.gif

要实现上面这种效果就需要用keep-alive这个标签了，下面是代码：

<template>
    <div class="home">
        <keep-alive>
            <componentA v-if="isShow"></componentA>
            <componentB v-if="!isShow"></componentB>
        </keep-alive>
        <button @click="changeShow">change</button>
    </div>
</template>

<script>
// @ is an alias to /src
import componentA from "../components/componentA";
import componentB from "../components/componentB";
export default {
    name: "home",
    components: {
        componentA,
        componentB
    },
    data() {
        return {
            isShow: true
        };
    },
    methods: {
        changeShow() {
            this.isShow = !this.isShow;
        }
    }
};
</script>