深入理解与使用keep-alive(配合router-view缓存整个路由页面)


Posted in Javascript onSeptember 25, 2018

在搭建 vue 项目时,有某些组件没必要多次渲染,所以需要将组件在内存中进行‘持久化',此时 <keep-alive> 便可以派上用场了。 <keep-alive> 可以使被包含的组件状态维持不变,即便是组件切换了,其内的状态依旧维持在内存之中。在下一次显示时,也不会重现渲染。

PS:<keep-alive><transition>相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在 this.$parent 中找不到 keep-alive

1. keep-alive的基础使用

最基础的一般是结合动态组件去使用:

<keep-alive>
  <component :is="currentView"></component>
</keep-alive>

new Vue({
  el: '#app',
  data(){
    return {
      currentView: Test //Test为引入的子组件
    }
  }
})

不过此种方式并无太大的实用意义。

2. 生命周期钩子

被包含在 <keep-alive> 中创建的组件,会多出两个生命周期的钩子: activateddeactivated

activated

在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。

deactivated

在组件被停用时调用。

注意:只有组件被 keep-alive 包裹时,这两个生命周期才会被调用,如果作为正常组件使用,是不会被调用,以及在 2.1.0 版本之后,使用 exclude 排除之后,就算被包裹在 keep-alive 中,这两个钩子依然不会被调用!另外在服务端渲染时此钩子也不会被调用的。

3. 配合router-view使用

有些时候可能需要将整个路由页面一切缓存下来,也就是将 <router-view> 进行缓存。这种使用场景还是蛮多的。

在vue 2.1.0 之前,大部分是这样实现的:

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

//router配置
new Router({
  routes: [
    {
      name: 'a',
      path: '/a',
      component: A,
      meta: {
        keepAlive: true
      }
    },
    {
      name: 'b',
      path: '/b',
      component: B
    }
  ]
})

这样配置路由的路由元信息之后,a路由的 $router.meta.keepAlive 便为 true ,而b路由则为 false
所以为 true 的将被包裹在 keep-alive 中,为 false 的则在外层。这样a路由便达到了被缓存的效果,如果还有想要缓存的路由,只需要在路由元中加入 keepAlive: true 即可。

4. 在2.1.0版本之后

在vue 2.1.0 版本之后,keep-alive 新加入了两个属性: include(包含的组件缓存生效) 与 exclude(排除的组件不缓存,优先级大于include) 。

includeexclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
当使用正则或者是数组时,一定要使用 v-bind !

<!-- 逗号分隔字符串,只有组件a与b被缓存。这样使用场景变得更有意义了 -->
<keep-alive include="a,b">
 <component :is="view"></component>
</keep-alive>

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

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

有了include之后,再与 router-view 一起使用时便方便许多了:

<!-- 一个include解决了,不需要多写一个标签,也不需要在路由元中添加keepAlive了 -->
<keep-alive include='a'>
  <router-view></router-view>
</keeo-alive>

5. 需要注意的地方

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
js数组操作常用方法
May 08 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
基于Angularjs实现分页功能
May 30 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 #Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 #Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 #Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 #Javascript
vue观察模式浅析
Sep 25 #Javascript
详解搭建es6+devServer简单开发环境
Sep 25 #Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 #Javascript
You might like
php Memcache 中实现消息队列
2009/11/24 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
Python异常处理知识点总结
2019/02/18 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python 实现dict转json并保存文件
2019/12/05 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
结婚喜宴主持词
2014/03/14 职场文书
北京奥运会主题口号
2014/06/13 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
教师见习报告范文
2014/11/03 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript