vue-keepAlive遇到的问题。

1. vue中keepAlive组件缓存

　　keepAlive很轻松的就能够实现组件之间的缓存，主要还是返回其DOM不让数据重新刷新。当使用了keepAlive之后，页面第一次进入，钩子的触发顺序created->mounted->activated，退出时触发deactivated。再次进入（前进或者后退）时，只触发actived。

　　注：activated和deactivated只在使用了keepAlive缓存机制才会触发的钩子函数。

　　下面就要开始我使用keepAlive遇到的一个问题

　　我先来说一下我的效果，有一个列表，点击详情返回列表后还在当前那一条数据（并不会重新请求数据），但是详情页中还有更新头像这一个功能点，但是这个组件已经使用keepAlive缓存机制了，在返回到组件中头像并不会更新，还是原来的头像，我记得我请求过数据，数据会更新，但是视图并不会。

　　因为这个问题我想了很久，因为我的项目是这微信中第三方打开的。

　　也看过ios，和安卓的效果，他们是更新完头像之后，返回列表在列表页面有上拉刷新。

　　所以最后我就使用的路由的钩子函数（导航守卫）来解决的这个问题。

　　beforeRouteLeave（to, from, next）{　　

　　　　// 主要跳转到其他页面时住的keepAlive值设置为false

　　　　from.meta.keepAlive = false

　　}

　　这样离开这个页面的时候就会把keepAlive设置成false，再次进入的时候就会重新请求数据，头像的问题也就能够得到解决

 

　　我也是第一次记录这样的文章，希望同行们多多指教，多多留言，共同进步。

　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2018-11-22