Vue.Keep-alive

用户320822050055

2021-09-04 229 阅读1分钟

Keep-alive:中文意为保持活动，顾名思义是让组件保持状态，不销毁组件
用法：使用包裹住动态组件

<body>
    <template>
        <div id="app">
            <button @click="state = 'A'">A</button>
            <button @click="state = 'B'">B</button>
            <button @click="state = 'C'">C</button>
            <!-- 组件 -->
             <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>

使用@cilick 点击事件切换组件，由于有keep-alive包裹动态组件，所以组切换后的效果会缓存到本地，不会销毁，使用比较小的组件可以用 v-show，如果组件体积比较大加载时间会比家长，更推荐使用keep-alive