keep-alive:防止动态组件销毁时造成的数据重置

动态组件切换的过程中，被替换掉的组件会被销毁，，导致切换回来的时候重新创建的组件内数据被初始化，造成数据丢失。

解决方式:用keep-alive标签包裹动态组件
keep-alive功效:被替换掉的组件会进入缓存(等待激活)状态，并不会被销毁。

keep-alive的属性：

• include="comName1,comName2"
  • include:接收组件名，设置哪些组件需要被缓存
• exclude="comName1,comName2"
  • exclude:接收组件名，设置哪些组件不需要缓存
• 注意：include和exclude不要同时使用

<template>
.
.
.
<!---用keep-alive组件包裹动态组件 --->
<keep-alive include='com1,com2'>
<!--keep-alive的include属性可以设置哪些组件将被缓存-->
<component :is='comName'></component>
</keep-alive>
.
.
.
</template>

<script>
import com1 ...
import com2 ...
import com3 ...
export default{
    
    date:{
        return {
            comName:'com1',
        }
     },
    components:{
         com1,
         com2,
         com3,
     },
}
.
.
.
</script>

涉及的组件生命周期：

使用<keep-alive>前:

created(){
    console.log("此时组件被创建")
    },
destory(){
    console.log("此时组件被销毁，数据更改不会被缓存")
    }

使用<keep-alive>后:

注意：当组件第一次被创建的时候，既会执行created也会执行activated
而组件被创建后，激活只会触发activated生命周期

diactivated(){
    console.log("此时组件被缓存，等待再次激活")
    },
activated(){
    console.log("此时组件被激活，更改的数据不会被重置")
    }