程序员求职经验分享与学习资料整理平台

网站首页 > 文章精选 正文

Vue中的keep-alive缓存组件

balukai 2025-03-07 16:02:14 文章精选 63 ℃

keep-alive

vue中keep-alive
既然上一篇中说到了Vue的生命周期,出现了keep-alive字段,那么这一篇就来说说对keep-alive的理解吧!

keep-alive: Vue 提供的一个内置组件,用来对组件进行缓存——在组件切换过程中将状态保留在内存中,防止重复渲染DOM,提高渲染的性能,减少渲染时间和提高用户的体验感。

在应用中,一个组件包裹了 keep-alive,那么它会多出两个生命周期:deactivated、activated。同时,beforeDestroy 和 destroyed 就不会再被触发了,因为组件不会被真正销毁。

1、activated
在 keep-alive 组件激活时调用
该钩子函数在服务器端渲染期间不被调用

2、deactivated
在 keep-alive 组件停用时调用
该钩子在服务器端渲染期间不被调用

使用 keep-alive 会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在 activated 阶段获取数据,承担原来 created 钩子函数中获取数据的任务。

当组件被换掉时,会被缓存到内存中、触发 deactivated 生命周期;当组件被切回来时,再去缓存里找这个组件、触发 activated钩子函数。

Tags:

最近发表
标签列表