keep-alive组件的include和exclude属性主要用于控制哪些组件被缓存或不被缓存。 include属性的作用: 当指定了include属性后,keep-alive只会缓存那些名称与include属性值匹配的组件。这就像是一个筛选器,只让特定的组件进入缓存区域。 例如,设置include="MyComponent",则只有名为MyComponent的组件会被缓存。这样可以精确地...
keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。 作用: 在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。 Keep-alive 组件提供了 include 和 exclude 两个属性,允许组件有条件的进行缓存: (1) include: 字符串或...
keep-alive是一个组件,这个组件中有三个属性,分别是include、exclude、max,在created中创建缓存列表和缓存组件的key列表,销毁的时候会做一个循环销毁清空所有的缓存和key,当mounted时会监控include 和 include属性,进行组件的缓存处理。如果发生变化会动态的添加和删除缓存。渲染的时候会去拿默认插槽,只缓存第一个组件,...
利用keep-alive缓存组件,在返回的时候不刷新页面也可以使用keep-alive的include属性或者exclude属性,include规定哪些组件使用缓存,exclude规定哪些组件不需要缓存,值都是组件名称(注意不是路由名称),多个组件以逗号隔开。 Spring的component-scan 、@Controller和@Component的都创建一个bean。 注解@ComponentScan的basePackages属...
<keep-alive :exclude="['a','b']"> <router-view class="Router" :class="{'has-footer': hasFooter}" /> </keep-alive> 注意点: 1、用法1和2不要出现空格(习惯害死人); 2、exclude和include用法要求在需要的组件内声明name,否则无效。
使用include/exclude // 组件 aexport default { name:'a',data() {return{} } } <keep-aliveinclude="a"><router-view><!-- 只有路径匹配到的视图 a 组件会被缓存! --></router-view></keep-alive> exclude例子类似。 缺点:需要知道组件的 name,项目复杂的时候不是很好的选择 ...
KeepAlive 默认缓存标签内所有组件,提供include和exclude属性可以实现条件缓存,支持逗号分隔、正则表达式,或者类型数组等三种形式 具体用法如下: <!-- 逗号隔离的字符串,匹配 name 为 a 或 b 的组件 --> <KeepAlive include="a,b"> <component :is="view" /> ...
keep-alive除了include和exclude属性之外,还有一个属性就是max属性,这个max一般情况用的不是太多,主要目的就是控制一下被缓存的组件的个数,后缓存的就会把先缓存的给挤掉线了,也是相当于缓存优化的一中策略了。毕竟适当缓存提高用户体验,缓存过渡,电脑变卡。
1.include 译为包含,代表只有被包含的组件才会被缓存。也就是说被 include 包含的组件不能够被频繁的创建和被频繁的销毁。 2.exclude 顾名思义,译为不包含,代表被exclude包含的组件不会被缓存。也就是说,exclude包含的组件能够被频繁的创建和频繁的销毁。
<keep-alive include="a"> <component> <!-- name 为 a 的组件将被缓存! --> </component> </keep-alive>可以保留它的状态或避免重新渲染 1. 2. 3. 4. 5. <keep-alive exclude="a"> <component> <!-- 除了 name 为 a 的组件都将被缓存! --> ...