记一次vue 的keep-alive踩坑之路

96
小小的大雄
0.4 2017.12.25 22:11 字数 1380

这个坑,从项目开始的时候就一直存在,在前期的时候还没有影响到正常的流程,加之项目比较紧,就一直没有花太多时间去管它。 可是在最近的业务中,这个问题已经影响到了正常的流程,所以这周一直在寻找这个问题的解决方案。在经历了各种论坛和各种贴子之后,找到了我目前能找到的最合适的解决方法,于是写下了这篇文章。

背景

用vue+cordova 做一个hybrid App,由于业务涉及的输入数据比较多,可能一个表单会包含多个子页面,这就要求在录入数据的时候,进入子页面之前需要将当前页的数据缓存,而在子页面返回的时候,子页面要销毁。也就是说,app正常前进的时候,页面全部缓,返回的时候之前的页面不需要刷新数据,直接读取缓存数据。
具体场景和这位仁兄一致: 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

为了找到一个合适的解决方案,我将这个场景进行了尽可能的简化,做成了一个DEMO,用来模拟这个场景。

Demo是用Vue-cli生成的,加上了简单的几个文件
项目结构如下图:


项目结构图

其中,child目录用来模拟子路由的,first/second是一级路由
具体路由文件如下:


router/index.js

最开始,什么都不处理,只要上页面上加上<router-link/> 是可以直接跳转的,当然也不会缓存任何组件。

给子路由加上缓存

我的最终目的给项目中所有的模块进行单独缓存,而一级页面不缓存。所以用child来模拟一个模块,first.vue 和 second.vue来模拟一级页面
每个模块(child)都有自己的入口,如child/index.vue,内容如下:


child/index.vue

这样可以将child下面所有的子路由进行缓存,可以用vue-devtool工具进行查看是否能够成功缓存


vue-devtool

可以看到,child下面的list以及detail组件已经缓存成功了。
到这里,已经实现了子路由的成功缓存。

但是这样会有一个问题:在页面返回的时候,所以被缓存的组件,会一直被缓存,再次进入页面的时候,组件并不会自动刷新,所以造成从list 点击不同的详情页的时候,进入的都是同一个页面。
在vue-devtool中看到的现象如下图:

缓存成功

当然,这种情况下也是有方法进行数据刷新的。因为所有被缓存的组件,再次进入的时候,会触发其生命周期的activated方法(https://cn.vuejs.org/v2/api/#keep-alive),可以在此进行强制数据刷新。
显然,这种方法不是我想要的。

在返回之前销毁当前实例

上面那种方法的问题在于:页面返回的时候,后面的组件(实例)还被缓存着,所以vue并不会重新去刷新它们。那么,如果在页面返回之前将自己销毁掉,vue也就找不到了,问题不就解决了么

正好,我项目用的ui框架是vonic https://github.com/wangdahoo/vonic/ ,在学习大神的源码的时候,发现了这样的一段代码,

vonic

这段代码的作用有两点:1、设置页面切换的动画(前进=》'forward',返回=>'back' );2、设置页面返回后的page position,也就是页面滚动的位置。
实现原理大致如下:
用sessionStorage来存储app打开过的路由,每当在路由跳转之前,先判断将要去的路由toRoute是不是在sessionStorage里面存在:如果存在,那么页面就是返回,将下一次路由切换的动画换成back,并改变sessionStorage中的history=false;如果不存在,那就是前进打开新的页面,同时将下一次路由切换的动画改成forward,同时改变sessionStorage中的history=true,并记录当前页的scrollTop。

其实vue-router本身的路由和浏览器的history对象一样,对应用程序来说,是不能直接操作的,这里作者用sessionStorage来模拟一个history,从而实现某些功能,这种方法是值得点赞的。

到这里,我们已经可以知道应用曾经打开过哪些页面,那我们在返回的时候是不是可以将某些页面销毁呢?答案是肯定的。

我们要做的是,在页面返回之前,也就是路由切换之前,要获取需要销毁的实例对象。
上图中有一个beforeEach,是vue-router提供的一个全局的钩子函数,它可以监听到每一次路由的切换,但却获取不到任何vue的实例对象。
在看了几遍vue-router的文档之后https://router.vuejs.org/zh-cn/advanced/navigation-guards.html ,我找到了一个组件内的钩子,也就是官方文档提到的导航守卫,如下图所示:

导航守卫

其中,我们要用到的是这个beforeRouteLeave,在将要离开组件对应路由的时候会触发这个钩子。而最重要的是,这个钩子可以获取到当前的组件实例this,所以我们可以在这个时候调用this.$destory()来销毁当前实例,就能完美解决上面提到的问题。
而这个钩子只能在组件内使用,也就意味着我每个需要缓存的组件都要调用这个钩子,难道每个组件里面都去写一遍这个钩子函数吗?

当然不用。

vue提供了全局的mixin方法,可以帮你在所有的实例里面加上这个钩子。

由于我的demo中没有用到vonic,所以我只能参照大神的源码,写了一段,具体如下:


main.js

这样,便可以实现,前进的时候缓存组件,返回的时候不刷新,并将最后一个页面销毁。

理论上,这个方案挺完美的。

前端开发
Web note ad 1