乐趣区

vue的keepalive讲解

jiezi

功能简介

keep-alive是 vue2.0 加入的一个特性，能缓存某个组件，或者某个路由。缓存的好处：

  1. 节省性能消耗，避免一个组件频繁重新渲染，节省开支
  2. 保存用户状态，比如说：我们在填写收货地址的页面，需要跳转到另一个页面通过定位选择地址信息再返回继续填写，这时候需要缓存收货地址页面，避免跳转页面导致用户数据丢失。

基础方法：

缓存组件，被 keep-alive 只会渲染一次

<keep-alive>
    <component>
      <!-- 组件将被缓存 -->
    </component>
</keep-alive>

缓存路由，所有在 keep-alive 标签下的路由都会被缓存：
<keep-alive>
<router-view></router-view>
</keep-alive>

进阶用法

有些时候，我们只需要缓存部分页面或者某些组件。

方法一：router.mate

在路由里面配置：

const router = [
        {
            name: 'login',
            path: '/login',
            component: login,
        },
        {
            path: '/createResume',
            name: 'createResume',
            component: createResume,
            meta: {isKeepAlive: true}
        },
        {
            path: '/test',
            name: 'test',
            component: test,
            meta: {isKeepAlive: true}
        }
    ]

利用路由元数据配置了一个isKeepAlive，来判断是否需要缓存该页面，在应用路由的地方需要做如下改动：

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

这样设置，test和createResume2 个页面就会被缓存，而其他页面就不会被缓存，在跳转的时候会被销毁。

方法二：inlcude/exclude

inlcude包含该组件就缓存，exclude不包含该组件就缓存，二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

<keep-alive :include="/mytable | mybuttom/" :exclude="/myselect/">
  <component :is="componentName"></component>
</keep-alive>

我们看到 component 是渲染动态组件用的，它渲染的组件跟 is 后面的组件名称有关系，当 componentName 变化是，包含在 include 里面的正则表达式：/mytable | mybuttom/里面的组件会被缓存起来，再次出现时，不会重新 created，而不在exclude 里面的组件会被缓存。上面的使用方式对于路由来说，也适用。
注意：所有的匹配都是匹配组件的 name，没有设置 name 的组件或者路由则不会被匹配

方法三：动态判断

<keep-alive :include="keepAliveArr">
  <component :is="componentName"></component>
</keep-alive>

我们只需要动态改变 keepAliveArr 里面的值就能动态设置哪些组件或者路由页面需要缓存了，很灵活。

被缓存组件的钩子函数

我们都知道 vue 组件的生命周期会触发 beforeCreate、created、beforeMount、mounted 这些钩子函数，但是被缓存的组件或者页面在第一次渲染之后，再次进入不会再触发上面的钩子函数了，而是触发 activated 钩子函数，可以将逻辑放到这里面去做。

同理：离开缓存组件的时候，beforeDestroy 和 destroyed并不会触发，可以使用 deactivated 离开缓存组件的钩子来代替。
更多更细节的讲解可以参考 vue 的官方文档:
官方文档

学习如逆水行舟，不进则退，前端技术飞速发展，如果每天不坚持学习，就会跟不上，我会陪着大家，每天坚持推送博文，跟大家一同进步，希望大家能关注我，第一时间收到最新文章。

公众号前端每日面试题分享：

退出移动版