vue中keepalive怎么理解?

说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js

什么是keepalive

我们平时开发中, 总有部分组件没有必要多次init, 我们需要将组件进行持久化,使组件状态维持不变,在下一次展示时, 也不会进行重新init

keepalive音译过来就是保持活着, 所以在vue中我们可以使用keepalive来进行组件缓存

基本使用

  1. // 被keepalive包含的组件会被进行缓存

  2. <keep-alive>

  3.    <component />

  4. </keep-alive>

上面提到被keepalive包含的组件不会被再次init,也就意味着不会重走生命周期函数, 但是平常工作中很多业务场景是希望我们缓存的组件在再次渲染的能做一些事情,vue为keepalive提供了两个额外的hook

  • activated 当keepalive包含的组件再次渲染的时候触发

  • deactivated 当keepalive包含的组件销毁的时候触发

注: 2.1.0 版本后keepalive包含但被exclude排除的组件不会有以上两个hook

参数

keepalive可以接收3个属性做为参数进行匹配对应的组件进行缓存

  • include 包含的组件

  • exclude 排除的组件

  • max 缓存组件的最大值

其中include,exclude可以为字符,数组,以及正则表达式
max 类型为字符或者数字

代码理解

  1. // 只缓存组件name为a或者b的组件

  2. <keep-alive include="a,b">

  3.  <component :is="currentView" />

  4. </keep-alive>

  5. // 组件名为c的组件不缓存

  6. <keep-alive exclude="c">

  7.  <component :is="currentView"/>

  8. </keep-alive>

  9. // 如果同时使用include,exclude,那么exclude优先于include, 下面的例子也就是只缓存a组件

  10. <keep-alive include="a,b" exclude="b">

  11.  <component :is="currentView"/>

  12. </keep-alive>

  13. // 如果缓存的组件超过了max设定的值5,那么将删除第一个缓存的组件

  14. <keep-alive exclude="c" max="5">

  15.  <component :is="currentView"/>

  16. </keep-alive>

配合router使用
  1. <!-- template -->

  2. // 意思就是$router.meta.keepAlive值为真是将组件进行缓存

  3. <keep-alive>

  4.    <router-view v-if="$router.meta.keepAlive"></router-view>

  5. </keep-alive>

  6. <router-view v-if="!$router.meta.keepAlive"></router-view>

  7. //router配置

  8. new Router({

  9.    routes: [

  10.        {

  11.            name: 'a',

  12.            path: '/a',

  13.            component: A,

  14.            meta: {

  15.                keepAlive: true

  16.            }

  17.        },

  18.        {

  19.            name: 'b',

  20.            path: '/b',

  21.            component: B

  22.        }

  23.    ]

  24. })

总结

keepalive是一个抽象组件,缓存vnode,缓存的组件不会被mounted,为此提供activated 和 deactivated 钩子函数, 使用props max 可以控制缓存组件个数

vue中keepalive怎么理解?​---vue中文社区的更多相关文章

  1. Vue中$nextTick的理解

    Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...

  2. Vue中keep-alive组件的理解

    对keep-alive组件的理解 当在组件之间切换的时候,有时会想保持这些组件的状态,以避免反复重渲染导致的性能等问题,使用<keep-alive>包裹动态组件时,会缓存不活动的组件实例, ...

  3. vue中mixins的理解及应用

    vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...

  4. Vue中keep-alive的使用

    Vue中keep-alive的使用我总结的有两种方式应用: 首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件.当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时 ...

  5. vue中keep-alive的用法

    1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-al ...

  6. vue中的slot理解和使用

    最近被vue 搞得一塌糊涂,理解的比较慢,工作进度进度要求太快,需求理解不明,造成了很大的压力. 在理解Vue中的Slot的时候看了网上的相关内容,看了半天没看到明白说的是什么,然后自己就安装了vue ...

  7. vue中nextTick的理解

    A. vue 中的 nextTick 是什么? 1.首先需要清楚,nextTick是一个函数:这个函数的作用,简单理解就是下一次渲染后才执行 nextTick 函数中的操作: 2.在下一次 DOM 更 ...

  8. vue中 keep-alive 组件的作用

    原文地址 在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前 ...

  9. vue中keep-alive,include的指定页面缓存问题

    做vue项目时,有时要在某些页面做缓存,而其它页面不要.比如:A:首页,B:获取所有订单页面,C:订单详情页面:从A(首页)进入 B(获取所有订单)时应该不缓存,B(所有订单)进入 C(订单详情)订单 ...

随机推荐

  1. linux C++类中成员变量和函数的使用

    1.undefined reference to XXX 问题原因 1)XXX所在的so库等未指定 2)XXX在类中实现的时候没有加上类::函数的格式 2. was not declared in t ...

  2. JS-07-函数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 用VLC搭建流媒体服务器

    用vlc搭建简单流媒体服务器(UDP和TCP方式) 这段时间用到了流媒体数据传输的TCP和UDP方式,感觉vlc可以做这方面的demo,这里总结下,也方便我以后查阅. 简介 VLC主页:http:// ...

  4. mysql建立高效索引分析

    一.如何建立理想的索引? 查询频繁度 区分度 索引长度 覆盖字段 1.1区分度 假设100万用户,性别基本上男/女各为50W, 区分度就低. 1.2长度小 索引长度直接影响索引文件的大小,影响增删改的 ...

  5. 技术派-github常见的一些用法和缩写

    PR: Pull Request. 拉取请求,给其他项目提交代码 LGTM: Looks Good To Me.  看起来不错,代码已 review,可以合并 SGTM: Sounds Good To ...

  6. ros中launch启动文件的使用方法

    launch文件:通过XML文件实现多节点的配置和启动(可自动启动ROS Master) launch文件中包含很多标签和属性 *launch文件语法 <launch> <node ...

  7. data structure test

    1.设计算法,对带头结点的单链表实现就地逆置.并给出单链表的存储结构(数据类型)的定义. #include <iostream> #include <cstdlib> #inc ...

  8. 机器学习总结-bias–variance tradeoff

    bias–variance tradeoff 通过机器学习,我们可以从历史数据学到一个\(f\),使得对新的数据\(x\),可以利用学到的\(f\)得到输出值\(f(x)\).设我们不知道的真实的\( ...

  9. 剑指offer刷题笔记

    删除链表中重复的结点:较难 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4- ...

  10. BZOJ2326 [HNOI2011]数学作业(分块矩阵快速幂)

    题意: 定义函数Concatenate (1 ..N)是将所有正整数 1, 2, …, N 顺序连接起来得到的数,如concatenate(1..5)是12345,求concatenate(1...n ...