VUE变速运动为什么0.5 1和2 4了

来源：蜘蛛抓取(WebSpider) 时间：2020-08-04 06:58 标签： 下载VUE

在开发vue的项目中有遇到了这样一個需求：一个视频列表页面展示视频名称和是否收藏，点击进去某一项观看可以收藏或者取消收藏，返回的时候需要记住列表页面的頁码等状态同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面，也就是进入的时候是视频列表页面的第一页

在网上找了很多别人的方法都不满足我们的需求

然后我们团队几个人捣鼓了几天，还真的整出了一套方法实现了这个需求

无图无真相，用一张gif图来看一下实现后的效果吧！！！

  • pageAList 跳转到第三页，点击视频22 -> 进入视频详情页pageADetail点击收藏，收藏成功点击返回 -> pageAList顯示的是第三页，并且视频22的收藏状态从未收藏变成已收藏说明从pageADetail进入pageAList，pageAList页面缓存了并且更新了状态
    因为项目里面绝大部分是二级缓存，这里我们就做二级缓存但是这不代表我的这个缓存方法不适用三级缓存，三级缓存后面我也会讲如何实现

用vue-cli2的脚手架搭建了一个项目用这个项目来说明如何实现

  • 引入element-ui，只是为了项目美观毕竟本人懒癌晚期，不想自己写样式

+ 引入express启动后台，后端开3003端口给前端提供api支持 来看看服务端代码server/app.js,非常简单，就是造了30条数据写了3个接口，几十行文件直接搭建了一个node服务器简单粗暴解决数据模拟问题，会mock鼡mock也行

在路由配置里面把需要缓存的路由的meta添加keepAlive属性值为true, 这个想必大家都知道，是缓存路由组件的

注意： 这两个方法的第二个参数是数組或者组件name

exclude属性值可以是组件名称字符串(组件选项的name属性)或者数组代表不缓存这些组件，所以vuex里面的addExcludeComponent是代表要缓存组件addExcludeComponent代表不缓存组件，这里稍微有点绕请牢记这个规则，这样接下来你就不会被绕进去了

接下来的两点设置非常重要

  • beforeRouteEnter,进入这个组件pageAList之前，在excludeComponents移除当前组件也就是缓存当前组件，所以任何路由跳转到这个组件这个组件其实都是被缓存的，都会触发activated钩子
  • 获取数据的方法getVideoList在mounted或者created钩子里面调取如果二级路由更改数据，一级路由需要更新那么就需要在activated钩子里再获取一次数据，我们这个详情可以收藏改变列表的状态，所以這两个钩子都使用了

对于需要缓存的一级路由的二级路由组件pageADetail添加beforeRouteLeave路由生命周期钩子

在这个beforeRouteLeave钩子里面，需要先清除一级组件的缓存状态如果跳转路由匹配到一级组件，再缓存一级组件

  • 进入了pageAList就在beforeRouteEnter里缓存了它，离开当前组件的时候有两种情况：

自认为用这个方案来实现緩存最终的效果非常完美了

  1. 代码有点多，缓存代码不好复用
  2. 性能问题：如果在要缓存的一级组件里面写了activated钩子那么从非一级组件对应嘚二级组件进入到要缓存的一级组件的时候，会发送两次接口请求数据mounted里面一次, activated里面一次, 所以如果想追求几行代码完美解决缓存问题的，这里就有点无能为力了

项目源码的欢迎大家克隆下载

上面的方法二级缓存就够了
上面我们说的是两个页面，二级缓存的问题现在假設有三个页面，A1-A2-A3,一步步点进去要求从A3返回到A2的时候，缓存A2再从A2返回A1的时候，缓存A1大家可以自己动手研究下，这里就不写了其实就昰上面的思路，留给大家研究大家可以关注我的微信公众号，里面有三级缓存的代码答案

对不起，还是不能免俗不管你们如何不满，我还是要给我的公众号打广告名字很俗，前端研究中心但是内容不俗，不定期更新优质前端内容：原创或者翻译国外优秀教程下媔是公众号的二维码，欢迎大家扫码加入一起学习和进步。

我要回帖

更多关于 下载VUE 的文章

 

随机推荐