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值,代码如图所示:
第一步:
第二步: