Vue实现组件全局和局部缓存(keep-alive)

这次使用Vue构建旅游webapp过程中，吸收和体验了keep-alive的真实作用。

相信大家只要阅读过Vue提供的官方文档就会知道，组件想要实现数据缓存就需要在App.vue中的<router-view />外层包裹<keep-alive></keep-alive>标签，就可以很容易的实现数据缓存啦，如下图所示:

 

 

没错，按照图上的操作的的确确可以实现组件数据的缓存， 但是我要告诉大家的是，这样做其实是有问题的，上面我们讲述的是全局组件的缓存，事实上在真实的开发流中可能并不需要全局的缓存，在在某些特定的场景下，还可能存在BUG，比如一个列表组件，在通往详情页的过程中需要传入列表的item.id，在详情页 接收到该id之后才能获取到相应的数据，会导致详情页只会接收到同一个id，因为请求只会发送一次，那么应该 怎么操作才能最优雅，而且不留BUG呢？

 

看这里，<keep-alive></keep-alive>分为两种模式: 全局缓存 / 局部组件缓存。

我们只需要在App.vue中设定一个条件，然后在路由文件的meta对象中添加一个keepAlive属性，该属性类型为Boolean值，代码如图所示:

第一步:

 

 第二步: