keep-alive
是 Vue 的一个内置组件,主要用于缓存组件实例,在多个组件动态切换时,避免组件的反复创建和渲染,从而有效提升系统性能。其使用方法为用<keep-alive>
标签包裹动态组件,使用时会缓存不活动的组件实例,而不是销毁它们。
keep-alive
有include
和exclude
两个属性,这两个属性决定哪些组件可以进入缓存。include
属性的取值可以是字符串、正则表达式或数组,只有名称匹配的组件会被缓存;exclude
属性的取值可以是字符串、正则表达式或数组,任何名称匹配的组件都不会被缓存。keep-alive
还可以设置max
属性,用于指定最多可以缓存的组件实例数量,当缓存的实例数量超过设置的值时,Vue
会移除最久未使用的组件缓存。
此外,受keep-alive
的影响,其内部所有嵌套的组件都具有两个生命周期钩子函数:activated
和deactivated
,它们分别在组件激活和失活的时候触发。其中,activated
钩子函数会在组件第一次被激活后触发,即在mounted
之后触发。