keep-alive  传送门

  <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

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

  主要用于保留组件状态或避免重新渲染

  

  include - 字符串或正则表达式。只有名称匹配的组件会被缓存
  exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
 

  Learn

    一、不使用<keep-alive>包裹动态组件

    二、使用<keep-alive>包裹动态组件

  目录结构

  

一、不使用<keep-alive>包裹动态组件

  此时组件A、B、C组件中的数会一直随机0~100且不重复

        <div id="GaryId">
<button @click="selectedName = 'my-component-a'"> a </button>
<button @click="selectedName = 'my-component-b'"> b </button>
<button @click="selectedName = 'my-component-c'"> c </button> <component :is="selectedName"></component> </div>
    "my-component-a":{
template:"<h1>A :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
},

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<button @click="selectedName = 'my-component-a'"> a </button>
<button @click="selectedName = 'my-component-b'"> b </button>
<button @click="selectedName = 'my-component-c'"> c </button> <component :is="selectedName"></component> </div>
</body> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data:{
selectedName:'my-component-a'
},
components:{
"my-component-a":{
template:"<h1>A :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
},
"my-component-b":{
template:"<h1>B :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
},
"my-component-c":{
template:"<h1>C :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
}
}
}).$mount("#GaryId");
</script>
</html>

Gary_dynamic_component.html

二、使用<keep-alive>包裹动态组件

  此时组件A、B、C组件中的数会第一次会随机出现,随后保存到缓存中,第二次再点击的时候它们会读取缓存中的数

        <div id="GaryId">
<button @click="selectedName = 'my-component-a'"> a </button>
<button @click="selectedName = 'my-component-b'"> b </button>
<button @click="selectedName = 'my-component-c'"> c </button> <keep-alive>
<component :is="selectedName"></component>
</keep-alive>
</div>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<button @click="selectedName = 'my-component-a'"> a </button>
<button @click="selectedName = 'my-component-b'"> b </button>
<button @click="selectedName = 'my-component-c'"> c </button> <keep-alive>
<component :is="selectedName"></component>
</keep-alive>
</div>
</body> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data:{
selectedName:'my-component-a'
},
components:{
"my-component-a":{
template:"<h1>A :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
},
"my-component-b":{
template:"<h1>B :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
},
"my-component-c":{
template:"<h1>C :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
}
}
}).$mount("#GaryId");
</script>
</html>

Gary_dynamic_component.html

  当只想缓存A组件

            <keep-alive include="my-component-a">
<component :is="selectedName"></component>
</keep-alive>

  当想缓存A组件和B组件时候

            <keep-alive :include="['my-component-a','my-component-b']">
<component :is="selectedName"></component>
</keep-alive>

  排除缓存A组件和B组件的时候

            <keep-alive :exclude="['my-component-a','my-component-b']">
<component :is="selectedName"></component>
</keep-alive>

Vue_(组件通讯)动态组件结合keep-alive的更多相关文章

  1. Vue_(组件通讯)动态组件

    动态组件 传送门 在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件 动态组件的使用:需要使用内置组件<component></component>,根据 ...

  2. Vue_(组件通讯)子组件向父组件传值

    Vue组件 传送门 子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: ...

  3. Vue_(组件通讯)父组件向子组件传值

    Vue组件 传送门 父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件 2.准备获取数据:c ...

  4. Vue_(组件通讯)父子组件简单关系

    Vue组件 传送门 在Vue的组件内也可以定义组件,这种关系成为父子组件的关系 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的 ...

  5. Hibernate学习---第五节:普通组件和动态组件

    一.普通组件映射配置 1.创建组件类,代码如下: package learn.hibernate.bean; /** * 组件类 */ public class Phones { private St ...

  6. Vue两种组件类型介绍:递归组件和动态组件

    一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...

  7. [Vue]组件——实现动态组件:keep-alive的使用

    1.在app.vue中用一个 <keep-alive> 元素将其动态组件包裹起来: keepAlive为true时,第一次被创建的时候缓存下来,为false时,不会缓存 <keep- ...

  8. Vue 组件4 动态组件

    动态组件 通过使用保留的<component>元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换: var vm = new Vue({ el: '#examp ...

  9. Vue组件的操作-自定义组件,动态组件,递归组件

    作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指 ...

随机推荐

  1. CW2A与CA2W

    字符串的ASCII和UNICODE之间的转换 1)Win32提供了API函数MultiByteToWideChar和WideCharToMultiByte来提供这种功能. 2)ATL还提供了另一套转换 ...

  2. Struts框架的使用初步

    Struts框架的使用初步: A:Apache下载struts.2.1.8.rar包. B:解压空工程,进入apps目录. C:将struts2的基本jar包拷到工程的lib目录中. D:配置web. ...

  3. C#求1-100的质数,100-1000的水仙花数,1-100所有的平方和平方平方根

    //你们的鼓励是我最大的动力 大家可以多留言评论  在接下来很长一段时间我会从初级到高级每天更新 大家有想学习的内容也可以留言哦 //现在是我做C#老师的第28天,希望和大家一起努力 加油 using ...

  4. Qt常用快捷键

    F1        查看帮助F2        跳转到函数定义(和Ctrl+鼠标左键一样的效果)Shift+F2    声明和定义之间切换F4        头文件和源文件之间切换Ctrl+1     ...

  5. O036、Snapshot Instance 操作详解

    参考https://www.cnblogs.com/CloudMan6/p/5510296.html   有时候系统损坏的很严重,通过 Rescue 操作无法修复,那么我们就得重新考虑通过备份恢复了. ...

  6. luogu P4688 [Ynoi2016]掉进兔子洞

    luogu 我们要求的答案应该是三个区间长度\(-3*\)在三个区间中都出现过的数个数 先考虑数列中没有相同的数怎么做,那就是对三个区间求交,然后交集大小就是要求的那个个数.现在有相同的数,考虑给区间 ...

  7. 12 Django之Cookie和Session

    一.什么是Cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接 ...

  8. BootStrape基础使用

    官网:www.bootcss.com 一. 全局css样式 栅格系统 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局 <!DOCTYPE html> < ...

  9. ffmpeg生成视频封面图

    ffmpeg 是一个视频处理软件 php-ffmpeg 是一个让 php 可以操作 ffmpeg 的 php插件,封装好了各种操作视频的名命令.直接调用对应的方法即可. 使用过程很曲折也很简单 曲折在 ...

  10. js动态添加控件(输入框为例)

    写在前面 昨天得到一个需求,需要在账户登记页面中动态添加输入框,经过半天的捣鼓,最终完美成型,写下来跟大家分享下, 供大家参考 开始复制代码了 如果复制了我所有代码的话,注意看js最后面方法的备注,最 ...