keepalived auth_type类型 AH keepalive include

转载

mob6454cc6dac54 2024-03-22 14:09:47

文章标签 vue.js 缓存字符串正则表达式 文章分类 运维

文章目录

1.用处
2.属性
3.介绍
4.使用
5.使用中可能遇到的问题

1.用处

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

2.属性

include
exclude
max

3.介绍

< keep-alive > 包裹动态组件时，会被缓存不活动的组件实例，而不是销毁它们。
< keep-alive >

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

4.使用

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为a或者b的组件 -->
<keep-alive include="a,b"> 
  <component />
</keep-alive>

<!-- excludet同理 -->

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>

5.使用中可能遇到的问题

当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created> mounted> activated，
退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

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