深入理解与使用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 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
简介JavaScript错误处理机制
Aug 04 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中显示数组与对象的实现代码
2011/04/18 PHP
php中autoload的用法总结
2013/11/08 PHP
php的dl函数用法实例
2014/11/06 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Django model update的多种用法介绍
2020/03/28 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
Python 切分数组实例解析
2019/11/07 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
用python写爬虫简单吗
2020/07/28 Python
利用python进行文件操作
2020/12/04 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
2014年团支部工作总结
2014/11/17 职场文书
村官个人总结范文
2015/03/03 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
导游词之临安白水涧
2019/11/05 职场文书
一起来学习Python的元组和列表
2022/03/13 Python
python计算列表元素与乘积详情
2022/08/05 Python