keep-alive的使用过程以及修改bug遇到的那些坑

keep-alive的使用介绍

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

我遇到的坑

上面是官方的解释，keep-alive官方文档点这里，也就是说它能够使动态组件以及内部数据不刷新，减少对服务器的请求，当然这个在于一些场景内会很方便而且快速的，比如使用一些tab页频繁的切换，但是数据不会频繁的刷新。但是我遇到一个bug就是之前的同时遗留下来的。古语有云，前人种树，后人乘凉，有的时候前人把坑挖了没种树，那就悲剧了，看看你是填了这个坑还是种好一棵树吧（哈哈，小小吐槽一下，其实我们关系还挺好的）。

言归正传，bug是这样的：
由于这个项目不是使用脚手架来搭建的，只是一个jquery为基础的多个vue实例的单页面，每一个功能模块就是一个单页，这可能也是我对vue这一渐进框架的理解吧。问题就来源于这里，原有的代码是这样的：

也就是说keep-alive用在了路由上，我觉得简单的问题大家也能想到，就是这样就会实现组件的缓存，但是有个缺点就是所有组件都会被缓存，可是现实中就是我们有些页面还是要及时刷新的，比如列表数据，想要查看详情的时候都是共用一个组件，只是刷新页面，所以这个共用的组件是不能够缓存的，不然会造成点其他的条目都是之前缓存的数据。

就按照我遇到的来讲，之前写的这个模块包括列表页List以及详情页，新建页，如果我从List点击到详情A然后退回来到List再查看详情B，详情显示还是A，还有就是新建C的时候跳回List发现列表页没刷新。所以测试的童鞋给我报了很多这个类型的bug。

我第一想法就是牺牲小我保存大我，直接删掉keep-alive，但是发现有的路由他已经写上了activated，所以删掉activated就不再执行了，显然不行。然后我就想要不就把请求加在activated里面吧，可这样做就相当于一进页面不是执行created就是执行activated，不但没缓存还更麻烦了，好气呀。我仔细想了想，只有详情不应该被缓存，还有就是列表页只有在新建的时候才会刷新数据，于是我想起了keep-alive的props 中的exclude把详情页排除了，那么新建刷新列表呢，于是乎用到的了beforeRouteEnter这个函数判断如果路由来自于新建页面就去请求数据，就这样解决了这个bug。

之前看到一篇文章，也让我学习了一下， 《vue使用keep-alive实现数据缓存不刷新》，在这里记录一下吧，因为我也是小白，不知道自己解决的对不对，希望大家看到给我一些建议或者意见吧，非常感谢。