深入理解与使用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 相关文章推荐
javascript创建函数的20种方式汇总
Jun 23 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 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 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
PHP中overload与override的区别
2017/02/13 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
js中document.write的那点事
2014/12/12 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
深入理解python try异常处理机制
2016/06/01 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
python 实现图片批量压缩的示例
2020/12/18 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
关于box-sizing的全面理解
2016/07/28 HTML / CSS
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
仓库管理专业个人自我评价范文
2013/11/11 职场文书
国际政治个人自荐信范文
2013/11/26 职场文书
建筑人员岗位职责
2013/12/25 职场文书
计算机毕业生求职信
2014/06/10 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python
java实现面板之间切换功能
2022/06/10 Java/Android