原文链接: 点我

在搭建 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> 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated

  • 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="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view> //router配置
new Router({
routes: [
{
name: 'a',
path: '/a',
component: A,
meta: {
keepAlive: true
}
},
{
name: 'b',
path: '/b',
component: B
}
]
})

这样配置路由的路由元信息之后,a路由的 $route.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) 。

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
当使用正则或者是数组时,一定要使用 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>

4.需要注意的地方

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

以上,致那颗骚动的心……

keep-alive的深入理解与使用(配合router-view缓存整个路由页面)的更多相关文章

  1. IGP和BGP路由协议配合降低非核心路由器的路由容量的实验与总结

    IGP和BGP路由协议配合降低非核心路由器的路由容量的实验与总结 一.结论 通过eBGP协议,可以显著降低对非核心路由器的路由容量要求,因为核心路由器的数量明显少于非核心路由器,所以,通过此措施既可以 ...

  2. 连续张量理解和contiguous()方法使用,view和reshape的区别

    连续张量理解和contiguous()方法使用,view和reshape的区别 待办 内存共享: 下边的x内存布局是从0开始的,y内存布局,不是从0开始的张量 For example: when yo ...

  3. pushState()、popstate事件配合ajax实现浏览器前进后退页面局部刷新

    最近研究pushState,看了网上的文章还是不怎么会用,于是自己摸索着理解使用,终于实现局部刷新同时前进后退. 首先说说pushState(),这个函数将当前的url等信息加入history堆栈中: ...

  4. Less与TypeScript的简单理解与应用,并使用WebPack打包静态页面

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 创建空项目 使用Less 使用TypeScript 使用WebPack 开始写项目 总 ...

  5. 《深入理解mybatis原理4》 MyBatis缓存机制的设计与实现

    <深入理解mybatis原理> MyBatis缓存机制的设计与实现 本文主要讲解MyBatis非常棒的缓存机制的设计原理,给读者们介绍一下MyBatis的缓存机制的轮廓,然后会分别针对缓存 ...

  6. 配合前端开发,调试前端页面bug

    同事开发的H5页面  在iOS10.1的手机上会有bug 先下载ios10.1的模拟器,安装到xcode上,注意给电脑腾出足够的空间 https://stackoverflow.com/questio ...

  7. animate.css配合wow.min.js实现各种页面滚动效果

    有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...

  8. 《深入理解Linux网络技术内幕》阅读笔记 --- 路由查找

    概述 1.不论是入口还是出口流量,都是利用fib_lookup来查找路由表,fib_lookup是对每一个路由表所提供的查找函数的包裹函数,当不支持策略路由时,查找函数版本针对的是local表和mai ...

  9. 《深入理解Linux网络技术内幕》阅读笔记 --- 路由基本概念

    一.路由的基本概念 1.一条路由就是一组参数,这些参数存储了往一个给定目的地转发流量所需的信息,而一条路由所需的最少的参数集合为:(1)目的网络,(2)出口设备,(3)下一跳网关 2.路由中的相关术语 ...

随机推荐

  1. django自定义404和500页面

    from django.contrib import admin from django.urls import path urlpatterns = [ path('admin/', admin.s ...

  2. 【摸鱼向】UE4的AI模块探索手记(1)

    前言 之前实现了自主创作的角色导入进UE4并成功控制其进行一系列动作,但目前的样子距离基本的游戏架构还差了一个很大的模块:NPC,而这部分是由电脑来进行自动控制,所以,我有一句话不知当讲不当讲(对,我 ...

  3. win下youtube-dl 【ERROR: requested format not available】选下载视频质量的坑--【值得一看】

    需求说明(bug出处): 简单说:下载youtube的视频,嵌入翻译好的中文字幕. 详细说(可略过): 阿里的海外服务器需要布一个Web Service---用以接收国内(本地服务器)的请求, 然后用 ...

  4. CARS: 华为提出基于进化算法和权值共享的神经网络结构搜索,CIFAR-10上仅需单卡半天 | CVPR 2020

    为了优化进化算法在神经网络结构搜索时候选网络训练过长的问题,参考ENAS和NSGA-III,论文提出连续进化结构搜索方法(continuous evolution architecture searc ...

  5. 31.1 Exception 的method :getMessage()、 printStackTrace()

    package day31_exception; import java.lang.Exception; /* * Throwable的常用方法: String getMessage() :原因 St ...

  6. docker 安装vim和yum命令

    apt-get updateapt-get install vim -yapt-get install yum -y

  7. 最长回文子窜O(N)

    字符窜同构的性质:同构字符窜拥有最小和最大的表示方法: 最长回文子窜: 1.首先暴力法:(n三方) 枚举每个起点和终点,然后单向扫描判断是不是回文子窜: 2.中心扩散法,(N方) 枚举每个中点,向外扩 ...

  8. Windows Pains poj 2585

    Boudreaux likes to multitask, especially when it comes to using his computer. Never satisfied with j ...

  9. 9.回文数-LeetCode

    判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121输出: true示例 2: 输入: -121输出: false解释: 从左向右读, ...

  10. 基于canvas的画板

    最近重新在看Html5&CSS3的知识,看到canvas的时候,想到了以前在学校学计算机图形学时做过的画图实验,于是想,可以基于html5和css3来做一款画板,经过1天的努力,完成了画板的一 ...