详解关于Vue2.0路由开启keep-alive时需要注意的地方
Vue2.0做应用必有的需求就是页面数据需要做缓存，不用每次进入页面都要把数据重新请求一遍，每次页面切换都有段等待数据相应时间，这个用户体验可想有多么蛋疼，所以页面缓存是必要的，啥时候需要更新页面数据呢？可以监听状态变化，或者是手动下拉刷新重新请求数据，酱紫，我想用户体验会做的更好。
keep-alive的作用以及好处
在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。
废话不多说直接上码，一般是在src/App.vue设置开启keep-alive实现页面数据缓存：
列举几个常用的hook方法，如下：
exportdefault{
data(){
return{
}
},
created:function(){
console.log("thehookofcreatedisdone!");
},
mounted:function(){
console.log("thehookofmountedisdone!");
},
activated:function(){
console.log("thehookofactivatedisdone!");
},
deactivated:function(){
console.log("thehookofdeactivatedisdone!");
}
}
首次进来hook的触发顺序created->mounted->activated，退出时触发deactivated：
//控制台打印结果
thehookofcreatedisdone!
thehookofmountedisdone!
thehookofactivatedisdone!
thehookofdeactivatedisdone!
二次进来hook只触发activated，退出时触发deactivated：
//控制台打印结果
thehookofactivatedisdone!
thehookofdeactivatedisdone!
所以这就是为什么有些人开启keep-alive之后，created和mounted注册的pageInt方法不触发的原因了，因为keep-alive把它们屏蔽了，也就是把数据缓存起来，所以不再请求。
如果你的某些页面一定要实时请求，你可以直接在activated这个hook做pageInt，就不要在created和mounted上面注册pageInt方法了。
还有你可以选择性pageInt，比如监听状态变化，包括但不限于监听路由的变化，某参数的变化，某时间节点的变化等等。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。