17：vue3 组件保持存活状态

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例

1、不使用KeepAlive，组件不保持存活，验证如下：

A组件

<template>
    <h3>ComponentA</h3>
    <p>{{ message }}</p>
    <button @click="updateHandle">更新数据</button>
</template>
<script>
export default{
    data(){
        return {
            message:"老数据"
        }
    },
    beforeUnmount(){
        console.log("组件卸载之前");
    },
    unmounted(){
        console.log("组件卸载之后");
    },
    methods: {
        updateHandle(){
            this.message="新数据"
        }
    }
}
</script>

 

B组件

<template>
    <h3>ComponentB</h3>
</template>

 

App.vue

<template>
  <h3>动态组件(A、B两个组件动态切换)</h3>
  <component :is="tabComponent"></component>
  <button @click="changeHandle">切换组件</button>
</template>

<script>
import ComponentA from "./components/ComponentA.vue"
import ComponentB from "./components/ComponentB.vue"

export default{
    data(){
      return{
        tabComponent:"ComponentA"
      }
    },
    methods:{
      changeHandle(){
        this.tabComponent=this.tabComponent=="ComponentA"?"ComponentB":"ComponentA"
      }
   },
   components:{
    ComponentA,
    ComponentB
   }
    
}
</script>

 

验证结果

（1）初始加载

 

（2）点击更新数据按钮后

（3）点击切换组件按钮后，加载B组件，同时打印组件卸载log

 

 （4）再点击切换按钮，切换回A组件，赋值显示默认值

 

2、使用KeepAlive，组件保持存活

App.vue组件显示用KeepAlive包住后

验证结果

（1）初始加载

（2）点击更新数据按钮

（3）切换组件，无组件卸载log

 

 （4）切换回A，依然显示新数据