vue中的切换缓存keep-alive

---

前言

每次切换新标签的时候，vue都会去创建新的实例。但是切换的组件的内容，是不会被缓存下来的，再次切换回来还是会进行刷新。
为了解决这个问题，vue缓存keep-alive就出现了。vue中切换缓存分为两种，其一是组件缓存，其二是路由组件缓存。
keep-alive 是vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件缓存

<button @click='flag = "testA"'>testA</button>
<button @click='flag = "testB"'>testB</button>

<keep-alive> // 哪里要用到缓存，就在哪个位置外面嵌套keep-alive标签进行了
    <components :is="flag"></components>
</keep-alive>
    
data(){
    return {
        flag:'testA'
    }
},
components:{
    testA:()=>import('./testA'),
    testB:()=>import('./testB')
}

哪里要用到缓存，就在哪个位置外面嵌套keep-alive标签进行了


keep-alive中两个重要的属性，include和exclude

• include：只有匹配的组件才会缓存。符合条件：字符串/正则
• exclude：除了匹配的内容不缓存，其他任何组件都会进行缓存。符合条件：字符串/正则

include部分：

<keep-alive include="testA">
    <components :is="flag" />
</keep-alive>

上述代码的意思就是，只有testA组件才会进行缓存，其他组件不会进行缓存。如果需要缓存多个组件的话，直接在include属性内容里面添加逗号分隔就行了。

<keep-alive include="testA,testB">
    <components :is="flag"></components>
</keep-alive>

exclude部分：

<keep-alive exclude = "testA">
    <components :is="testA"></components>
</keep-alive>

除了testA组件不缓存，其余组件都会进行缓存。

二、路由组件缓存

<keep-alive >
    <router-view />
</keep-alive>

路由需要缓存的话，直接在路由出口外面嵌套，不过这样子嵌套的话，会对整个路由都进行缓存。
如果只是需要缓存部分路由组件的话，就需要进行判断操作。常见的方法就是在路由文件中，对每个组件添加***meta属性***。

路由文件的操作：

router.js

export default new Router({
  routes: [
    { path: '/', 
    name: 'home',
    meta:{
        keepAlive:true // 表示当前组件需要被缓存
    },
    component: Main },
    { path: '/news', 
    name: 'news',
    meta:{
        keepAlive:false// 表示当前组件不需要被缓存
    },
    component: false},
  ]
})

在对路由出口进行缓存的时候，是没有include和exclude属性的。需要通过v-if属性来进行判断。具体代码如下：

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

不过需要注意的是，如果页面被用户刷新了的话，缓存是不生效的。如过刷新了的话，还需要有缓存的功能的话，这得要用到本地存储。