什么是keep-alive?

在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件。
也就是说,kee-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 。也就是所谓的组件缓存

使用场景

举个例子:移动端H5项目,订单列表页面,有分页,当我们滑动的时候,就会加载相应的数据,当我们前往了订单详情页面,再从订单详情返回订单列表,这时产品需要让我们前端的小伙伴做到在返回后,需要保持上次加载的数据以及滑动的位置,这个时候就会有聪明的同学说keep-alive,没错,就是它,很棒的。。。

常用知识点

在这里插入图片描述
注意:被keep-alive包含的组件不会被再次初始化,也就意味着缓存的组件不会再次被mounted,为此提供activated和deactivated两个生命周期的钩子。

  • activated 当 keep-alive 包含的组件再次渲染的时候触发
  • deactivated 当 keep-alive 包含的组件销毁的时候触发

属性理解

  1. include包含的组件(可以为字符串,数组,以及正则表达式,只有匹配的组件会被缓存)
  2. exclude排除的组件(以为字符串,数组,以及正则表达式,任何匹配的组件都不会被缓存)
  3. max缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

注:

  1. 当使用正则表达式或者数组时,一定要使用v-bind
  2. 如果同时使用include,exclude,那么exclude优先于include
代码示例:
// 所有路径匹配到的视图组件都会被缓存! 
<keep-alive>
    <router-view></router-view>
</keep-alive>

// 只缓存组件name为aa或者bb的组件
<keep-alive include="aa,bb"> 
  <component />
</keep-alive>

// 组件name为cc的组件不缓存
<keep-alive exclude="cc"> 
  <component />
</keep-alive>

// 如果同时使用include,exclude,那么exclude优先于include, 下面的例子只缓存aa组件
<keep-alive include="aa,bb" exclude="bb"> 
  <component />
</keep-alive>

// 如果缓存的组件超过了max设定的值3,那么将删除第一个缓存的组件
<keep-alive exclude="c" max="3"> 
  <component />
</keep-alive>

结合router使用

使用 meta 属性
// routes 配置
export default [
   {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  },
  {
    path: '/aa',
    name: 'aa',
    component: Aa,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  },
  {
    path: '/bb',
    name: 'bb',
    component: Bb,
    //不写meta即不需要被缓存
  }
]
<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件,比如 Home! -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不会被缓存的视图组件,比如 Aa,Bb! -->
</router-view>

注意的坑点

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

Logo

前往低代码交流专区

更多推荐