1. 为什么需要缓存组件:
理解:
- 默认情况下,在切换路由时,路由对应的组件会被重新创建或销毁,每次切换的路由都是新创
- 如果可以缓存路由组件,将可以提高用户体
- 例如用户在登录时,输入用户名,切换到了其他路由,回来时,原来输入内容还在,会怎样
2. keep-alive缓存组件
keep-alive 是Vue内置的组件,可以是被包含的组件被缓存,保留组件的状态,避免重新渲染
router-view 组件,如果被包裹在keep-alive里面,所以路径匹配的组件都会被缓存
编程方式:
<keep-alive>
<router-view></router-view>
</keep-alive>
这样在每次切换组件时,组件不会被销毁, 组件中的状态得以报错
3. 钩子函数
说明
- 在最初学习组件的生命周期时,学习过8个钩子函数
- 如果使用
keep-alive组件将会多出两个钩子函数分别为activated和deactivated -
activated被激活, 表示被缓存的组件激活使用, 当前处于活跃状态 -
deactivated被活化,表示当前组件虽然被缓存,但是不是处于活跃状态
示例:
<script>
export default {
name:"Home",
activated(){
console.log("actived");
},
deactivated(){
console.log("desactived");
}
}
</script>
4. keep-alive重要的两个属性
4.1 组件缓存的问题
讲这两个重要属性前,先理解下面几个问题
- 缓存组件可以提升用户体验,
- 比如: 登录输入的内容,当切换其他路由再回来是,还保留之前输的
- 但是有必要所有的组件都需要缓存吗?
- 是想一下,如果一个组件的数据需要实时跟后台数据同步,如果被缓存可能就不会发送ajax
- 也就不会实时获取最新的数据
- 可以我们也知道,
keep-alive包裹的router-view组件位置的所有组件都会被缓存 - 如果喜欢某些组件不需要被缓存应该如何处理
4.2 keep-alive两个非常重要的属性:
-
include字符串或正则表达式, 只有匹配的组件会被缓存 -
exclude字符串或正则表达式,任何匹配成功个组件都不会被缓存,用的比较多
示例:
通过组件名来排除一些不需要缓存的组件
<keep-alive exclude="About">
<router-view></router-view>
</keep-alive>
此时通过exclude属性将About组件排除在缓存之外.
