有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。开启keep-alive 生命周期的变化.初次进入时: onMounted> onActivated退出后触发 deactivated
// APP.vue文件,将页面作为组件缓存<router-view v-slot="{ Component }"><keep-aliveinclude="testKA"><component:is="Component"/></keep-alive></router-view> 复制代码 在router对应的页面中,需要设置name属性,如下: exportdefault{name:'testKA',// keep-alive中include属性匹配组件namedata() {return...
exclude: [String, RegExp, Array], // 配置了该属性,那么任何名称匹配的组件都不会被缓存 max: [String, Number]// 最多可以缓存多少组件实例 }, setup(props: KeepAliveProps, { slots }: SetupContext) { const instance = getCurrentInstance()! const sharedContext = instance.ctx as KeepAliveContext ...
vue3的keep-alive组件使用详解(包含手动控制缓存清除), 视频播放量 5938、弹幕量 2、点赞数 51、投硬币枚数 30、收藏人数 177、转发人数 10, 视频作者 大侠不能倒在路上, 作者简介 这个人很懒,什么都没写!,相关视频:tab与keep-alive缓存控制,详细讲解router-tabs组件开
指定不缓存的组件 exclude 语法同 include 设置最大缓存实例数 max 如果缓存的实例数量即将超过指定的那个最大数量,则最久没有被访问的缓存实例将被销毁,以便为新的实例腾出空间。 <KeepAlive :max="10"> <component :is="activeComponent" /> </KeepAlive> ...
内置组件keep-alive 有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。 开启keep-alive 生命周期的变化 初次进入时: onMounted> onActivated ...
一、代码结构 如图所示 如上图所示:有Home、About、User 三个组件 现在想保活 Home、About两个组件在App.vue中代码如下:
keep-alive 缓存和清除 keep-alive 缓存原理:进入页面时,页面组件渲染完成,keep-alive 会缓存页面组件的实例;离开页面后,组件实例由于已经缓存就不会进行销毁;当再次进入页面时,就会将缓存的组件实例拿出来渲染,因为组件实例保存着原来页面的数据和Dom的状态,那么直接渲染组件实例就能得到原来的页面。
简介:Vue-Router路由动态缓存组件(keep-alive),vue2/vue3不同写法 一、简介 Vue Router 允许你缓存路由组件,这样在用户导航回之前的页面时,组件的状态会被保留而不是重新渲染。这可以通过使用<keep-alive>组件来实现。 <keep-alive>是一个内置抽象组件,它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
动态组件式与v-if一样,是对组件重渲染,隐藏后组件不再存在,缓存清除。 二、KeepAlive缓存 当组件使用v-if或动态组件来控制显示时,组件不显会御载组件,清除缓存,组件上所做的一切操作都不会保存。如果要使组件不显示仍然存在,操作依然保留,需将其放入<KeepAlive>标签内。<KeepAlive>标签内的组件重新显示时,原...