vue中的keep-alive缓存

在开发vue项目时，咱们常常须要在各个组件之间进行切换，当咱们在A组件中写了一些内容，或者保存了一些状态的时候，切换到其余组件，A组件的内容就消失了，这是什么缘由呢？

咱们在A组件的生命周期created中打印一下：

created(){
    // eslint-disable-next-line no-console
    console.log("组件从新渲染了");
  },

而后咱们在浏览器中来回切换几回组件，查看一下控制台：

能够看出，每一次进行组件切换的时候，组件都会进行从新渲染，因此里面的内容也会跟着消失，那么咱们就会用到keep-alive来解决这个问题。

keep的几种使用方式

1.自定义想要缓存的组件

首先在App.vue中添加代码：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />

这一段代码的意思是：
当正在跳转的组件的$route.meta.keepAlive为true时，就将该组件加入缓存，不然不加入缓存。

而后在路由中找到咱们须要进行缓存的组件，设置meta.keepAlive的值为true

path: '/',
    name: 'Home',
    component: Home,
    meta: {
        keepAlive: true
    }

此时当咱们在home组件表单中输入123，而后点击跳转到其余组件再回来的时候，咱们发现123仍然存在，生命周期也不会再从新打印了。

咱们还能够直接在路由守卫中进行keepAlive值的设置：

beforeRouteLeave(to,from,next){
    to.meta.keepAlive = true;
    next();
  }

2.结合动态组件<component>使用

<template>
  <div class="home">
  <keep-alive>
    <component v-if="iview" :is="view1"></component>
    <component v-if="!iview" :is="view2"></component>
  </keep-alive>
  <button @click="iview = !iview">切换子组件</button>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import WorldHello from '@/components/WorldHello.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld,WorldHello
  },
  data(){
    return{
      iview:true,
      view1:HelloWorld,
      view2:WorldHello
    }
  }
}
</script>

这样咱们在HelloWorld和WorldHello这两个组件之间进行切换时候，两个组件都会被缓存了。

注意：动态组件中才能够使用，静态组件是不能够使用的，例以下面这种：

<keep-alive>
    <component is="view1"></component>
</keep-alive>