Keep-alive: To Keep a component alive without destroying it usage: to wrap a dynamic component

<body>
    <template>
        <div id="app">
            <button @click="state = 'A'">A</button>
            <button @click="state = 'B'">B</button>
            <button @click="state = 'C'">C</button>
            <! - component - >
             <keep-alive>
                <comp-a v-if="state==='A">A</comp-a>
                <comp-b v-if="state==='B">B</comp-b>
                <comp-c v-if="state==='C">C</comp-c>
            </keep-alive>
        </div>
    </template>
</body>

<script>
    import CompA from './components/CompA'
    import CompB from './components/CompB'
    import CompC from './components/CompC'

    export default {
        data() {
            return {
                state: 'A'}},components: {
            CompA, CompB, CompC
        }
    }
</script>
Copy the code

Use @cilick to click the event to switch components. Since keep-alive wraps dynamic components, the effect of group switching will be cached locally and will not be destroyed. V-show can be used for smaller components