keep-alive的主要作用是缓存不活动的组件实例,而不是销毁它们。这意味着当用户返回到之前访问过的页面时,组件的状态(包括数据和DOM)将被保留,无需重新加载和渲染,从而提高了用户体验和性能。 2. exclude属性在keep-alive中的用途 exclude属性用于指定哪些组件不应该被keep-alive缓存。当组件的nam
keep-alive: 会把内部的组件进行缓存,而不是销毁组件 当组件第一次被创建的时候,既会执行 created 生命周期,也会执行 activated 生命周期 当时,当组件被激活的时候,只会触发 activated 生命周期,不再触发 created。因为组件没有被重新创建 include: 可以通过 include 指定哪些组件需要被缓存 exclude : 通过exclude...
有时候我们希望在A组件时用户做了一些操作,切换B组件时做了一些操作,当切回A组件时希望记住A的操作,不要重新创建A组件,keep-alive可以缓存动态切换的组件 失活的组件将会被缓存 <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive> 供有include 和exclude 属性决定哪些组件可以...
但是因为keep-alvie会使该组件读取缓存,而这个实体dom又被移除了,就只能显示空白。 解决方法就是,让组件在热更新后重新传染。代码如下: <template><types:key="routerKey"v-if="routerKey"></types><keep-alive v-else:exclude="/NoCache$/"><types:key="routerKey"v-if="routerKey"></types></keep-al...
2. keep-alive 是一个抽象组件,不会渲染成为真实的 DOM 节点,也不会出现在[父组件链](./component.md)中3. keep-alive 将 VNode 节点缓存到一个对象中(变量名 cache)4. keep-alive 将需要缓存的 VNode 保存在 cache 中,在 render 时,如果 VNode 的 name 符合缓存条件(通过 exclude 和 include 控制),...
<keep-alive> 除了可以包裹普通组件外,它还可以配合 <router-view> 使用,将整个路由页面一起缓存下来。下面通过样例进行演示。 二、配合 router-view 使用 1,使用样例 (1)效果图 这是一个简单的 router-view 路由导航效果。当路由地址改变时,页面组件随之切换显示。 由于router-view 是包裹在 <keep-alive> 中...
keep-alive props include定义缓存白名单,keep-alive会缓存命中的组件; exclude定义缓存黑名单,被命中的组件将不会被缓存; max定义缓存组件上限,超出上限使用LRU的策略置换缓存数据。 LRU是内存管理的一种页面置换算法。 LRU缓存策略 (Least recently used,最近最少使用)缓存策略:从内存中找出最久未使用的数据置换新的...
5.keep-alive的三个属性 ① include : 组件名数组,只有匹配的组件会被缓存 ② exclude : 组件名数组,任何匹配的组件都不会被缓存 ③ max : 最多可以缓存多少组件实例 App.vue <template><keep-alive :include="['LayoutPage']"><router-view></router-view></keep-alive></template> 6.额外的两个生命...
二、keep-alive内置组件 作用:动态切换组件时缓存组件实例,避免dom重新渲染。 1.缓存动态组件 当组件为componentOne时缓存该组件实例 <keep-alive:include="componentOne`":exclude="componentTwo":max="num"><component:is="currentComponent"></component></keep-alive> ...
这时,可以使用keep-alive标签,利用其include和exclude属性,对指定组件进行缓存,之后再使用就不用重新创建了。 - 标签会对include属性指定的组件进行缓存,而不是直接销毁 当组件被缓存时,会自动触发组件的deactivated生命周期函数。 - 也可通过exclude属性指定哪些组件不需要被缓存; ...