vue 缓存组件keep-alive

Posted 2023-04-19

参考技术A

kee-alive 是 Vue 内置的一个组件， 可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存

keep-alive是一个抽象的组件，缓存的组件不会被mounted,为此提供activated和deactivated钩子函数
在2.1.0 版本后keep-alive新加入了两个属性: include(包含的组件缓存生效) 与 exclude(排除的组件不缓存，优先级大于include) 。

keep-alive可以接收3个属性做为参数进行匹配对应的组件进行缓存:

include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)

exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)

max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

配合router使用

1.keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称。
2.keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例。
3.当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(当前vue 2.4.2 version)。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。
4.包含在 keep-alive 中，但符合 exclude ，不会调用activated和 deactivated。

参考 https://juejin.cn/post/6844903918313406472
参考 https://www.imooc.com/article/302879

Vue keep-alive 组件

一、简介

keep-alive是Vue提供的一个抽象组件，可以用来对组件和路由进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。

(1) keep-alive 缓存路由

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

被缓存的路由，第一次进入页面的时候会调用 created() 方法，第二次进入页面时就不会再调用 created() 方法了，因为页面被缓存起来了。那么我们如果页面改动了，怎么刷新页面呢？虽然 created() 方法不会被调用，但是activated、deactivated这两个生命周期钩子函数会被执行。也就是我们的接口可以写在 activated() 方法中。

(2) keep-alive 缓存组件

<keep-alive>
    <loading></loading>
</keep-laive>

被包裹在keep-alive中的组件的状态将会被保留，例如我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100条列表处。

二、缓存指定的组件

在开发的时候，往往不需要缓存所有的路由或组件，那么怎么设置缓存指定的路由和组件呢？

2.1 利用include、exclude属性

include属性表示只有name属性为bookLists，bookLists的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存exclude属性表示除了name属性为indexLists的组件不会被缓存，其它组件都会被缓存。

<keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

2.2 利用meta属性

export default[
 
  path:'/',
  name:'home',
  components:Home,
  meta:
    keepAlive:true //需要被缓存的组件
 ,
 
  path:'/book',
  name:'book',
  components:Book,
  meta:
     keepAlive:false //不需要被缓存的组件
  
]

<keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
  <!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->