是什么
是vue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM(在切换页面或者组件的时候不被销毁)
更加详细的解释
在该组件的内部,会使用一个缓存对象(Vue2为JS对象Vue3为Map对象)来存储被包裹的组件实例。当组件被切换到后台时,实例不会被销毁,而是被保存在缓存对象中;当组件再次被激活时,会直接从缓存对象中恢复实例,而不是重新创建。为了方便用户在使用该组件时进一步完成附加任务,其对应添加了两个生命周期钩子,这两个钩子允许我们在组件激活和停用时执行特定的逻辑。
activated: 当组件被激活时,会触发组件的activated生命周期钩子;
deactivated: 当组件被切换到后台时,则会触发deactivated生命周期钩子。
如何使用
使用原则:当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive
举个栗子:
当我们从首页–>列表页–>商详页–>再返回,这时候列表页应该是需要keep-alive
从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存),这时候可以按需来控制页面的keep-alive
在路由中设置keepAlive属性判断是否需要缓存 (这个就是结合router 和缓存进行的条件判断是否缓存相应的组件)
{ path: 'list', name: 'itemList', // 列表页 component (resolve) { require(['@/pages/item/list'], resolve) }, meta: { keepAlive: true, title: '列表页' } }
<div id="app" class='wrapper'> <keep-alive> <!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 不需要缓存的视图组件 --> <router-view v-if="!$route.meta.keepAlive"></router-view> </div>
用
<keep-alive>(上面这 html中的使用方法)
使用的场景
路由切换:在单页面应用(SPA)中,在不同的路由页面之间切换时,如果不希望每次切换都重新加载和渲染页面,可以使用 <keep-alive>来缓存这些页面。实际开发中常常有以下场景,有一个列表页面并且列表的每一项都会对应跳转到相应的详情页面,当用户从列表页面点击一项进入详情页面,然后再次返回到列表页面时,往往希望列表页面能保持原来的滚动位置和状态,这就可以使用 <keep-alive>来缓存列表页面。
- 标签页切换:在一些复杂的界面中,可能会使用标签页(Tab)来切换不同的内容。如果每次切换标签页都重新渲染内容,可能会导致性能问题,尤其是当标签页的内容包含大量数据或复杂的组件时。在这种情况下,也可以使用 <keep-alive>来缓存标签页的内容。
- 条件渲染:在使用v-if或v-show进行条件渲染时,如果希望在条件变化时保留组件的状态,而不是每次都重新创建和销毁组件,也可以使用 <keep-alive>来缓存组件。
3.性能优化:在一些性能敏感的场景中,例如列表滚动、动画等,可通过缓存组件来避免不必要的渲染,提高性能。
4.数据持久化:在一些需要保持数据状态的场景中,例如表单填写、游戏等,可通过 <keep-alive>使用户离开页面后能保持原来的数据,以便用户返回时可以继续操作