keep-alive 简介
keep-alive
是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
在vue 2.1.0 版本之后,keep-alive
新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存,优先级大于include) 。
使用方法
1 | <keep-alive include='include_components' exclude='exclude_components'> |
参数解释include
- 字符串或正则表达式,只有名称匹配的组件会被缓存exclude
- 字符串或正则表达式,任何名称匹配的组件都不会被缓存
include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。当使用正则或者是数组时,一定要使用v-bind
!
使用示例
1 | <!-- 逗号分隔字符串,只有组件a与b被缓存。 --> |
使用场景
1、尽管可以通过正则表达式来include和exclude一些组件,但用的更多是通过router.meta
属性明确的指定该组件是否要缓存
router.meta
配置
1 | ... |
然后通过v-if
标签来判断是否需要缓存
1 | <!-- 缓存 --> |
2、不同的页面切换,刷新规则不同:B->A不刷新, C-A刷新
路由A的配置
1 | { |
组件B配置
1 | export default { |
组件C配置
1 | export default { |
注意事项
如果组件被缓存,created()
方法是不会被执行的。而一般我们都会在created方法中去请求数据,加载列表,那么如果当前页面缓存了,后台数据有更新,就会造成数据不能及时显示到前台,这时就需要手动刷新页面了。
所以组件是否需要缓存需要事情而定
1 | export default { |