一、图片总览
Snipaste_2020-05-14_13-52-20.png
二、使用细节
1.第一次进入页面 created-mouted-activated都会执行 采用alive之后,第二次进入页面只会执行activated
2.activated和deactivated这两个生命周期只有在keep-alive的时候才会触发到
3.刷新页面的话,所有请求都会重新执行一次,缓没缓存都一样
4.点击浏览器返回箭头不会刷新页面.切换路由(不刷新页面,keep-alive就会发挥作用)
三、keep-alive的其他属性用法
1.在属性后面贴组件名称就可以了
Snipaste_2020-05-14_15-12-26.png
这些属性的优先级是最高的,比$route.meta.keepAlive高
四、使用注意点
1.在详情页被缓存的时候
具体说明:列表页,其中每一项都有id.若我点击id=1的项进如它的详情页,然后点击返回.再点击id=2的项进如详情页,则详情页并不会重新发起请求.这时候id=1与id=2的详情页的数据是一样的.
处理方法:
image.png
在详情页的代码中加上这个这个生命周期,每次进入详情页的时候都获取实时点进来的id,并重新请求本页数据