keep-alive如何清除缓存

2022-04-26 21:32:01 阅读：588 来源： 互联网

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现

利用脚手架创建项目后会生成home和about两个组件，并且通过路由进行切换

//home组件
<template>
 <div class="home">
 <input type="text">
</div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
 name: 'home',
 components: {
   HelloWorld
 }
}
</script>

//about组件
<template>
 <div class="about">
 <input type="text">
</div>
</template>
<script>
export default {
 name:"about"
}
</script>

当我们在home组件的输入框输入一些内容的时候，然后切换到about组件，在切换回home组件，我们会发现之前输入的内容被清空了，其实也容易理解，就是当切换到about组建的时候，home组件就被销毁了，输入框的值自然被清空了

那么此时我们就可以利用keep-alive组件进行包裹router-view组件，将不活动的组件缓存起来

//App组件
<template>
 <div id="app">

  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <keep-alive>
    <router-view />
  </keep-alive>

</div>
</template>

写完之后会发现当切换到about组件时，home组件中的destroyed并没有触发,并且home组件的值也保存了下来
home组件写了123，about组件写了456，来回切换数据都保存下来了。

但是这样也肯定不好，我们会发现，about组件的值也被缓存了，就是所有的路由组件都被缓存了，严重浪费性能，而且也不符合需求，我们现在只想缓存home

在keep-alive上有两个属性

字符串或正则表达式。只有匹配的组件会被缓存。

include 值为字符串或者正则表达式匹配的组件name会被缓存。
exclude 值为字符串或正则表达式匹配的组件name不会被缓存。
首先利用include实现，匹配到组件中定义的name，将进行缓存

<keep-alive include="home">
 <router-view />
</keep-alive>

而exclude就是排除了，这个就不在演示了，很简单

meta

除了这个我们还可以利用路由中的meta属性来控制

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

keep-alive代码可以结合v-if进行包裹，如果meta中的keepAlive为true进行缓存，否侧不进行缓存，这样可以更灵活一些

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

标签：about,缓存,name,alive,keep,组件,home
来源： https://www.cnblogs.com/JianXin1994/p/16196622.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

keep-alive如何清除缓存

在keep-alive上有两个属性

meta