本文主要介绍Vue内置组件keep-alive的使用。

Vue内置组件keep-alive的使用

keep-alive接收三个props：
●include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
●exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
●max - 数字。最多可以缓存多少组件实例。

当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

Example:

1
2
3
4
5
6 大专栏  Vue内置组件keep-alive的使用
7
8
9
10
11
 
<keep-alive :include="/a|b/">
    <router-view></router-view>
</keep-alive>

<keep-alive :exclude="/c|d/">
    <router-view></router-view>
</keep-alive>

<keep-alive :max="10">
    <router-view></router-view>
</keep-alive>

Vue内置组件keep-alive的使用的更多相关文章

  1. 通俗易懂了解Vue内置组件keep-alive内部原理

    1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...

  2. Vue内置组件[回顾]

    1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...

  3. vue内置组件 transition 和 keep-alive 使用

    1.transition name - string,用于自动生成 CSS 过渡类名.例如:name: 'fade' 将自动拓展为.fade-enter,.fade-enter-active等.默认类 ...

  4. vue内置组件——transition简单原理图文详解

    基本概念 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡 ...

  5. Vue基础（环境配置、内部指令、全局API、选项、内置组件）

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  6. vue第十一单元(内置组件)

    第十一单元(内置组件) #课程目标 熟练掌握component组件的用法 熟练使用keep-alive组件 #知识点 #1.component组件 component是vue的一个内置组件,作用是:配 ...

  7. 阅读vue源码-----内置组件篇（keep-alive）

    1.前言: <keep-alive>是vue实现的一个内置组件,也就是说vue源码不仅实现了一套组件化的机制,也实现了一些内置组件. <keep-alive>官网介绍如下:&l ...

  8. form-create教程:给内置组件和自定义组件添加事件

    本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...

  9. vue-learning：34 - component - 内置组件 - 缓存组件keep-alive

    vue内置缓存组件keep-alive <keep-alive>标签内包裹的组件切换时会缓存组件实例,而不是销毁它们.避免多次加载相应的组件,减少性能消耗.并且当组件在 <keep- ...

随机推荐

  1. typescript--介绍ts

    TypeScript 介绍 TypeScript 是什么 TypeScript 是 JavaScript 的强类型版本.然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript 代码.由于最终 ...

  2. 洛谷P1525 关押罪犯（并查集、二分图判定）

    本人蒟蒻,只能靠题解AC,看到大佬们的解题思路,%%%%%% https://www.luogu.org/problemnew/show/P1525 题目描述 S城现有两座监狱,一共关押着N名罪犯,编 ...

  3. Android开发学习4

    学习内容: 1.RecyclerView 2.WebView

  4. SaltStack schedule功能

    1.确保计划中没有作业 salt.states.schedule.absent(name, **kwargs) 2.确保在计划中禁用的作业 salt.states.schedule.disabled( ...

  5. Linux 创建静态库.a

    gcc -c 只编译不连接 -o *.o(生成.o文件) ar crv  name.a   *.o *.o  (ar 命令把 .o文件打包成  name.a 静态库) 测试 name.a -L 紧跟链 ...

  6. vs strcore.cpp(156) 内存泄漏

    在一个静态函数的线程回调中,一个cstring的对象没释放. 遇到这种问题: 1.查看所有的指针对象,有没有合适的回收 2.查看代码的malloc,看看有没有free 3.一点一点注释代码,定位位置

  7. CF1137C Museums Tour（tarjan+DP）

    由于d很小,所以可以把每个点拆成d个点,然后对于边(x,y),连边时连接((x,i),(y,i+1))及((x,d),(y,1)).然后可以对这样连的边跑一遍tarjan缩点.然后直接暴力DP即可.不 ...

  8. Ubuntu16.04中Mysql 5.7 安装配置

    记录在Ubuntu 16.04安装Mysql 5.7时遇到的一些问题. Mysql安装 使用如下命令进行安装: 1 sudo apt-get install mysql-server mysql-cl ...

  9. Part-Selenium-1

    1.在浏览器中的console输入:帮助定位 > $x('xpath表达式') > $('css表达式') 2.driver > chrome driver: https://npm ...

  10. 2018SEERC Points and Rectangles (CDQ分治)

    题:http://codeforces.com/gym/101964/problem/K 分析:https://blog.csdn.net/qq_43202683/article/details/98 ...