Vue之keep-alive

JouyPub

keep-alive 简介

keep-alive是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
在vue 2.1.0 版本之后,keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存,优先级大于include) 。

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>

参数解释
include - 字符串或正则表达式,只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式,任何名称匹配的组件都不会被缓存
include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。当使用正则或者是数组时,一定要使用v-bind !

使用示例

<!-- 逗号分隔字符串,只有组件a与b被缓存。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 正则表达式 (需要使用 v-bind,符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

<!-- Array (需要使用 v-bind,被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>

使用场景

1、尽管可以通过正则表达式来include和exclude一些组件,但用的更多是通过router.meta属性明确的指定该组件是否要缓存

router.meta配置

...
    {
        path: 'edit',
        component: () => import('@/views/site/edit'),
        name: 'site.edit',
        meta: {
            title: '网址编辑',
            hidden: true,
            cache: false
        }
    },
    {
        path: 'list',
        component: () => import('@/views/site/list'),
        name: 'site.list',
        meta: {
            title: '网址列表',
            hidden: false,
            cache: true
        }
    },
...

然后通过v-if标签来判断是否需要缓存

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

<!-- 不缓存 -->
<router-view v-if="!$route.meta.cache"></router-view>

2、不同的页面切换,刷新规则不同:B->A不刷新, C-A刷新

路由A的配置

{
        path: '/',
        name: 'A',
        component: A,
        meta: {
            cache: true // 需要被缓存
        }
}

组件B配置

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
             // 设置下一个路由的 meta
            to.meta.cache = true;  // 让 A 缓存,即不刷新
            next();
        }
};

组件C配置

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
            // 设置下一个路由的 meta
            to.meta.cache = false; // 让 A 不缓存,即刷新
            next();
        }
};

注意事项

如果组件被缓存,created()方法是不会被执行的。而一般我们都会在created方法中去请求数据,加载列表,那么如果当前页面缓存了,后台数据有更新,就会造成数据不能及时显示到前台,这时就需要手动刷新页面了。
所以组件是否需要缓存需要事情而定

export default {
        data() {
            return {};
        },

        created() {
            // do some thing...
        },
        methods: {},
};



欢迎订阅「K叔区块链」 - 专注于区块链技术学习

博客地址:http://www.jouypub.com
简书主页:https://www.jianshu.com/u/756c9c8ae984
segmentfault主页:https://segmentfault.com/blog/jouypub
腾讯云主页:https://cloud.tencent.com/developer/column/72548
阅读 1.5k

jouypub.com
聊聊区块链,大数据,后端开发,前端开发

聊聊区块链、大数据、应用开发

522 声望
159 粉丝
0 条评论

聊聊区块链、大数据、应用开发

522 声望
159 粉丝
宣传栏