技术移动端H5踩坑——keepAlive

Posted 2021-05-01 小闲日记

keep-alive是vue开发中的一个伪DOM元素，并不会生成在DOM结构中，而是作以标记来避免页面切换时组件的反复渲染，从而提升用户体验。

由于keep-alive会使组件不会反复渲染，故重复进入组件时并不会触发created、mounted等钩子，离开组件时也不会触发destoryed等钩子。而是使用了activated和deactivated来替代。

vue的移动端开发中经常会将keep-alive应用到路由层面，在用户处罚页面回退时，可以快速展示出上一个页面，尤其是“右划”操作。

但笔者近日在项目中，在keep-alive中踩到了坑。按之前的理解，keep-alive是做了类似页面缓存的处理，并不会影响到应用的路由结构，且在DevTools上可以清晰看到这样的结构。

然而，在项目进入测试阶段后，问题开始出现——QA提出，在部分低版本系统机型的部分浏览器上出现了回退错误，错误的具体表现为：当我们从浏览器启动页（命名为Page 0）进入到应用首页（Page 1），再进入到列表页面（Page 2），此时在Page 2触发router.back，页面并没有回退到Page 1，而是回到了浏览器启动页（Page 0）。

用图片来表述一下：（在部分低版本系统机型的部分浏览器上会出现该问题）

简而言之，router.back会让所有keepAlive的路由发生回退，一直退到了浏览器启动页去，这并不是开发者想实现的效果。

于是笔者试图使用原生的history.go(-1)的方式来实现回退，这个方法是有效的，大部分出现该问题的机型都不再重现此问题。但是小部分浏览器会出现“多回退一个页面”的情况。

综上，笔者不建议在router-view层面应用keep-alive，如果不得不应用，可以尽可能采用history.go或history.back来代替router.back。