vue中的keep-alive缓存

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

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

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

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

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

keep的几种使用方式

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

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

这一段代码的意思是：
当正在跳转的组件的$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.结合动态组件使用

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

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