组件保持存活

当使用 <component :is="..."> 来在多个组件间作切换时，被切换掉的组件会被卸载。我们可以通过<keep-alive>组件强制被切换掉的组件仍然保持“存活”的状态

组件被卸载

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
</template>
<script>
export default {
    beforeUnmount(){
        console.log("组件卸载之前");
    },
    unmounted(){
        console.log("组件卸载之后");
    }
}
</script>

保持存活

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
    <p>{{ message }}</p>
    <button @click="updateHandle">修改数据</button>
</template>
<script>
export default {
    data(){
        return{
            message:"老数据"
        }
    },
    methods:{
        updateHandle(){
            this.message = "新数据"
        }
    }
}
</script>

实时效果反馈

1. 保持组件存活的方案，下列那个是正确的：

A <component is='...'>

B <keep-alive>

C beforeMounte

D unmounted

答案

1=>B