vue中的keep-alive

keep-alive的作用是什么?

• keep-alive可以实现组件缓存，当组件切换时,主要用于保留组件状态或避免重新渲染
• 使用场景：比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染
• 常用的两个属性include/exclude，允许组件有条件的进行缓存
• 两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态

使用方法

方法一:

//在router文件夹中index.js
定义路由的时候可以配置 meta 字段：
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
      keepAlive:true
    }
  }
]
//在main.js中
	keep-alive可以实现组件缓存，当组件切换时,主要用于保留组件状态或避免重新渲染	
	在meta中给keep-alive:true
 <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>
      -->

方法二:

//在Find.vue中
<template>
    <div>
        Find
        //include可以进行过缓存,exclude不可以进行缓存
        <keep-alive include="ComponentA">
            <ComponentA v-if="boo"/>
        </keep-alive>
        
        <ComponentB  v-if="boo"/>

        <button @click="boo=!boo">改变</button>
    </div>
</template>
<script>
import ComponentA from "./ComponentA.vue"
import ComponentB from "./ComponentB.vue"
export default {
    name:"Find",
    components:{
        ComponentA,
        ComponentB
    },
    data(){
        return {
            boo:true
        }
    },
     created(){
        console.log("find里的created")
    },
    destroyed(){
         console.log("find的销毁")
    },
    activated(){
        console.log("find被激活");
    },
    deactivated(){
         console.log("find被失活");
    },
    beforeRouteLeave(to,from,next){
        to.meta.keepAlive=false;
        next();
    }
}
</script>

//在main.js中
<!-- include exclude 的值 是组件内的name -->
 <!-- <keep-alive include="Home">
      	<router-view></router-view>
      </keep-alive> -->