本文主要介绍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. 15 docker 网络 docker 容器之间的关系 docker link

    1.案例:使用 link 关联后台与数据库 创建 test1 容器 docker run -d --name test1 busybox /bin/sh -c "while true; do ...

  2. Python笔记_第一篇_面向过程_第一部分_8.画图工具(小海龟turtle)

    turtle 是一个简单的绘图工具. 提供一个小海龟,可以把它理解为一个机器人,只能听懂有限的命令,且绘图窗口的原点(0,0)在中间,默认海龟的方向是右侧海龟的命令包括三类:运动命令.笔画控制命令.其 ...

  3. Python list 字符串 注册 登录

    #list #列表 python中 数组.array等都用列表 list表示#创建一个liststu = ['xiaoming','xiaoli','xiaohuang','alex','lily', ...

  4. 小程序中map的取值和赋值

    1.初始化 resultMap: { "near": [], "join": [], "publish": [] } 2.js中直接取 co ...

  5. Kafa 的安装配置及使用

    1.kafka 的简介及应用场景 Apache Kafka是一个分布式的消息系统,可用于统计,日志及流处理 2.kafka 基本原理 3.kafka 集群体系结构 4.kafka实例 https:// ...

  6. 0x06 - Nginx 负载均衡会话保持

    Nginx 负载均衡会话保持 背景 负载均衡时,如果APP需要保持特定状态的时候,就要保证同一用户的 session 会被分配到同一台服务器上. 实现方案 使用cookie 将用户的 session ...

  7. C - The Battle of Chibi HDU - 5542 (树状数组+离散化)

    Cao Cao made up a big army and was going to invade the whole South China. Yu Zhou was worried about ...

  8. day03-函数

    形参:位置参数:必须传 *args:动态参数,可以接收任意多个位置参数 默认值参数:可以传也可以不传 **kwargs:动态参数,可以接收多个关键字参数. 实参:按照位置传参,按照关键字传参. #顺序 ...

  9. Linux SSH 允许root用户远程登录和无密码登录

    1. 允许root用户远程登录 修改ssh服务配置文件 sudo vi /etc/ssh/sshd_config调整PermitRootLogin参数值为yes,如下图: 2. 允许无密码登录同上,修 ...

  10. 项目中docker swarm实践

    docker swarm 集群服务通信 前置要求 服务需要在同一个docker swarm集群中 服务需要处于同一个overlay网络上 服务需要暴露容器端口 有2个以上服务名不同的服务 服务部署流程 ...