当前位置: 首页 > Web前端 > vue.js

Vue.js中的保活组件

时间:2023-04-01 12:24:34 vue.js

一般用于包裹动态组件,可以使包含的租用组件保持状态,避免被重新渲染。在组件之间来回切换时,它会缓存不活跃的组件实例,而不是执行组件生命周期的destroyed钩子函数来销毁组件。keep-alive有exclude和include两个属性,用来包含或不包含该组件,然后对其进行相应的缓存操作。当组件在切换时,会对应执行activated和deactivated两个生命周期钩子函数。例如:当我们下次要返回这个页面时,我们仍然保持离开时的状态。比如下拉的高度就是一个可以保留的状态。然后我们就可以调用它的两个钩子函数来记录和缓存滚动高度,保证下次回来时还是当前高度。当你离开时,将视口顶部的高度保存在停用状态;当你回来时,在激活状态下,让它经过一个短暂的延迟(大约50毫秒),或者你离开时记录的位置的高度。