Vue中＜keep-alive＞组件的使用

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

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

<keep-alive><component />  //需要缓存的组件
</keep-alive><!-- 逗号分隔字符串 -->
<keep-alive include="a,b"><component :is="view"></component>
</keep-alive><!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/"><component :is="view"></component>
</keep-alive><!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']"><component :is="view"></component>
</keep-alive><!-- 只缓存组件name为name1或者name1的组件 -->
<keep-alive include="a,b"> <component />
</keep-alive><!-- exclude同理 -->

2. excludet

<!-- 组件name为a的组件不缓存-->
<keep-alive exclude="a"> <component />
</keep-alive><!-- 注意：如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件-->
<keep-alive include="a,b" exclude="b"> <component />
</keep-alive>

3. max

<!-- 最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。-->
<keep-alive max="5"> <component />
</keep-alive>

4使用中可能遇到的问题
当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created> mounted> activated，
退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

注意：我们知道 keep-alive 之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。有需要的话，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。
所以，有需要的话，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。

1 匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
2 不会在函数式组件中正常工作，因为它们没有缓存实例。
3 最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

Vue中＜keep-alive＞组件的使用相关推荐

vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
vue中写svg组件svg图片加载不出来
vue中写svg组件svg图片加载不出来结构首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader npm install svg-sprite-loader - ...
vue中，兄弟组件之间传值
vue中,兄弟组件之间传值项目中,需要使用多个子组件,当需要传递值的时候,较为麻烦,怎样实现呢 1.一般可以使用子组件a传递给父组件,再由父组件传递给子组件b.但是一般较为麻烦, 2.使用bus作为 ...
Vue中，一个组件调用其他组件的方法（非父子组件）
Vue中,一个组件调用其他组件的方法(非父子组件) 场景--B页面(组件)想调用 A页面(组件)中的方法:但是两个页面(组件)毫无关联(刷新 A的数据). 方式一:引用式 1.当前组件引入将要调用方法 ...
「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩源码在文末. 前言上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
vue中使用keepAlive组件缓存遇到的坑
项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...
vue中获取/操作组件中的dom元素
最近刚做了一个项目,需要用到地图,选择的是腾讯地图,创建地图的时候,需要给地图创建函数中传入地图容器的id或者容器的dom元素,但是在调试过程中,发现怎么都无法获取dom元素,直接通过getEleme ...
Vue中封装打印组件包括基本信息、表格用途出库单、入库单、请购单等单据
1.我们在工作中,在中后台系统应用中,经常会遇到打印的问题. 2.产品需求将列表详情数据能够打印生产单据,包括列表详情的所有数据. 3.通常我们可以通过接口拿到一定格式的JSON数据. 打印组件,总的 ...
vue中8种组件通信方式,纯干货！值得收藏
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...

Vue中＜keep-alive＞组件的使用

Vue中＜keep-alive＞组件的使用相关推荐

最新文章

热门文章