vue中缓存组件数据方案

想要缓存VUE组件数据，首选是使用自带的keep-alive组件，使用了该组件后，被该组件包裹的组件数据都会被缓存，组件仅会在初始加载时触发一次mounted及其之前的所有生命周期，而之后则会在activated 和 deactivated这两种事件状态切换，对这样的组件来说重点是在什么时机进行数据重置，一般会把数据获取更新方法放在activated事件中。

keep-alive有一个不方便的地方是，它的缓存是由VUE自动管理的，在需要的时候无法主动对缓存进行清除（在网上搜索过一些方法，主要是推荐用v-if进行组件重载，但测试后发现数据还是存在，而设置includes属性不够灵活）。

在开发项目的过程中发现，当组件是重用的公共组件时，keep-alive就无法满足使用场景了，因为当在不同ID的重用组件间切换时，甚至连activated 和 deactivated这两种事件都不会触发，而仅仅是路由发生了变化，这时候组件的数据就无法响应这种变化，无论怎么切换都只会保持初始的数据，因此需要新的缓存策略。

参考Vue Router文档的说明，在这种情况下，需要使用beforeRouteUpdate钩子来处理数据，基本策略如下图：

组件缓存周期与时机钩子

待续