keep-alive标签的作用

2022-08-01,,

keep-alive标签的用法

keep-alive标签是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

include: 字符串或正则表达式。只有匹配的组件会被缓存。
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude优先级大于include

结合router,缓存部分页面

使用$route.meta的keepAlive属性:

需要在router中设置router的元信息meta:

keep-alive生命周期钩子函数:activated、deactivated

使用会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务。
被包含在 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated
activated:在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。
deactivated:在组件被停用时调用。
注意:只有组件被 keep-alive 包裹时,这两个生命周期才会被调用,如果作为正常组件使用,是不会被调用,以及在 2.1.0 版本之后,使用 exclude 排除之后,就算被包裹在 keep-alive 中,这两个钩子依然不会被调用!另外在服务端渲染时此钩子也不会被调用的。

本文地址:https://blog.csdn.net/wang091816/article/details/107415435

《keep-alive标签的作用.doc》

下载本文的Word格式文档,以方便收藏与打印。