本文主要介绍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. Python笔记_第四篇_高阶编程_GUI编程之Tkinter_3.数据显示

    1. 表格数据显示: 图示: 实例: import tkinter from tkinter import ttk # 创建主窗口__编程头部 win = tkinter.Tk() # 设置标题 wi ...

  2. Django_前介

    Django 1.软件框架 ​ 一个公司是由公司中的各部部门来组成的,每一个部门拥有特定的职能,部门与部门之间通过相互的配合来完成让公司运转起来. ​ 一个软件框架是由其中各个软件模块组成的,每一个模 ...

  3. 七、Shell脚本高级编程实战第七部

    一.写网络服务的系统启动脚本 利用case语句开发类似系统启动rsync服务的脚本 代码: #!/bin/sah. /etc/init.d/functionspidfile="/var/ru ...

  4. C#.NET中的ToString()数字格式化

    数字格式字符串-----货币-----.ToString("C");.ToString("c");例 2.5.ToString("c") - ...

  5. c语言中，为什么以下程序直接按”Enter“也就是回车程序不结束？

    /************************************************************************* > File Name: system.c ...

  6. [CTS2019]无处安放（提交答案）

    由于蒟蒻太菜没报上CTS,只能在家打VP. 感觉这题挺有意思的,5h中有3h在玩这题,获得74分的“好”成绩. 说说我的做法吧: subtask1~3:手玩,不知道为什么sub2我只能玩9分,但9和1 ...

  7. liquibase使用教程

    在项目中引入liquibase过程: 1.父项目 pom.xml 中添加依赖 <dependencies> <dependency> <groupId>mysql& ...

  8. script和scriptreplay_超骚气的实时监控你的服务器

    今天看到一个超级叼的linux命令,可以完整记录屏幕上的命令与输出结果. 有人问这有什么叼的,不就是保存历史操作记录吗?我看看日志也能看出来. 不不不,我要说的“完整记录”包括第几秒执行什么命令,就像 ...

  9. 6）HTML中a链接跳转地址怎么写

    (1)看 thinkphp5的   附录--->助手函数  --->url 利用url进行书写地址跳转: 比如,你想跳转到cate控制器下的lst方法: <a href=" ...

  10. netstat - 系统信息

    netstat - 系统信息 注意:如果是勘验或者验证漏洞,需要验证netstat程序的完整性(netstat程序是否被修改过). # 老版本的CentOS中会自带这个软件包,新版的7有的时候需要单独 ...