详解基于vue的移动web app页面缓存解决方案

现在移动web app越来越热门了，许多公司开始尝试使用angular、react、vue等MVVM框架来开发单页架构的web app。但在开发web app时，如果希望页面的导航体验也接近原生应用，那一般都会遇到这两个问题：

  • 识别前进后退行为
  • 后退时恢复之前的页面

笔者开发了一个基于vue与vue-router的导航库vue-navigation，来帮助开发者来解决这些问题，下面是问题的解决思路。

识别前进后退

先说第一个问题。和原生app不一样，浏览器中主要有这几个限制：

  • 没有提供前进后退的事件
  • 不允许开发者读取浏览记录
  • 用户可以手动输入地址，或使用浏览器提供的前进后退来改变url

解决方案是自己维护一份浏览记录，每次url改变时，通过与记录的浏览记录作对比，从而判断出前进后退行为：

  • url存在于浏览记录中即为后退
  • url不存在于浏览记录中即为前进
  • url在浏览记录的末端即为刷新

另外，应用的路由路径中可能允许相同的路由出现多次（例如A->B->A），所以给每个路由添加一个key值来区分相同路由的不同实例。

这个浏览记录需要存储在sessionStorage中，这样用户刷新后浏览记录也可以恢复。

后退时恢复之前的页面

识别出后退行为后，下一步就是像原生一样恢复之前的页面了。

一种方案是页面继续存储在DOM中，添加样式display: none来告诉浏览器不渲染该元素，但是缓存的页面多了DOM就会变得很大，会影响页面的性能，本文不讨论这个方案。

另一种方案是将数据缓存到内存中，开发者需要将页面的数据存储起来，当返回到该页面时，再根据数据将页面恢复。但是这样每个页面存储的数据不通，一般需要进行额外的编码，如果有一种更底层的方案能解决这个问题，并且对开发者是透明的，就最好了，所以尝试并开发了vue-navigation。

在vue-navigation 0.x版本的时候，借助了vue的keep-alive来缓存页面，但是keep-alive是根据组件的name或tag来决定缓存的，所以带来了很多限制。

通过拜读keep-alive的源码，了解到它的缓存机制后，就自己实现了一个管理缓存的组件，来灵活地缓存子组件，实现思路如下：

  1. 每次render时，先取到子组件的vnode（vue的虚拟dom）
  2. 计算出vnode的key，把key值赋给vnode避免vue-router复用组件实例
  3. 根据key值判断该节点是否已缓存
    1. 已缓存：将缓存的实例赋给componentInstance，这样vue就会根据这个实例来恢复组件
    2. 未缓存：将vnode存储到内存中，下次返回到该页面时可以从内存中恢复

另外还需要添加一个清除缓存的逻辑，当自己维护的浏览记录变化时，根据浏览记录清除不需要的缓存（例如当前的路由是：A->B->C，用户从C直接返回到了A，那么B和C都需要从缓存中删除）。

最后

虽然是基于vue来开发的，但是思路是不变的，使用其他框架也可以做到同样的事情。

还是安利一下vue和vue-navigation。使用插件后，再将router-view放在navigation下就有缓存功能了。

main.js

import Vue from 'vue'
import router from './router' // vue-router 实例
import Navigation from 'vue-navigation'
Vue.use(Navigation, {router})
// 启动你的应用...

App.vue

<template>
 <navigation>
  <router-view></router-view>
 </navigation>
</template>

最后欢迎大家讨论或提供更好的解决方案。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue2.x中数据渲染以及vuex缓存的问题

    最近在学习Vue.js,把自己遇到的问题做个记录,所以,今天添加一点小笔记. 在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很好的处理办法,欢迎提出,自己还在不断优化中... 第一个是vue在加载页面的时候,会先加载静态资源,这个时候数据还没有请求回来,用户会先看到静态的内容(就是页面固定写死的),过一会才会有数据回来渲染,这体验是很差的,其实解决办法也很简单,就是用vue里的 v-if 来判断请求的数据是否返回... <div class="container&quo

  • Vuex和前端缓存的整合策略详解

    如何存放或更新缓存? 缓存数据来源是预知的,我们可以预先定义哪些 mutation 是缓存相关的. 我们期望这个过程更自然一点,通过某种变化自动映射,使以后不管缓存类别增加还是减少都能修改极少的代码来应对变化. Vuex的插件可以拦截 mutations,借助这个机制,我们可以制定一种策略化的规则. 可以规定,所有需要更新缓存的 mutationType 都要符合这种格式:module-type-cacheKey,非缓存的 mutationType 格式为 module-type. 那么就可以拦

  • 详解vue之页面缓存问题(基于2.0)

    比如有一个列表页面,然后列表每项都有一个详情,之前用vue1.x的时候,页面缓存基本没有什么问题. 在vue2.0中出现了列表页面是每次都重新加载数据,但是详情页面却只在第一次加载的时候调用数据,如果返回到列表再进入详情那么页面是不会重新渲染页面,可能是新手吧,这个问题困扰了我很久,一直没有办法解决-- 根据vue-router的官方文档所说, watch: { // 如果路由有变化,会再次执行该方法 '$route': 'fetchData' } 按照这样写了,但是页面还是没有渲染 . . .

  • 关于Vue实现组件信息的缓存问题

    当我们在开发vue的项目过程中,避免不了在路由切换到其他component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-alive来缓存vue的组件信息,使其不再重新加载. 在app.vue里 <keep-alive> <router-view></router-view> </keep-alive> 但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果. 那么我们给部分组件加上,实现方法如下: 在app.vue里 <!-

  • 详解基于vue的移动web app页面缓存解决方案

    现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题: 识别前进后退行为 后退时恢复之前的页面 笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路. 识别前进后退 先说第一个问题.和原生app不一样,浏览器中主要有这几个限制: 没有提供前进后退的

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    详解基于Vue cli开发修改外部组件Vant默认样式

    前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s

  • 详解基于vue的服务端渲染框架NUXT

    Nuxt 随着现在vue和react的流行,许多网站都做成了SPA,确实提升了用户体验,但SPA也有两个弱点,就是SEO和首屏渲染速度.为了解决单页应用的痛点,基于vue和react的服务端渲染应运而生.由于公司的框架采用的是vue,所以就简单的研究了一下基于vue的服务端渲染框架--NUXT.在vue的官网有关于服务端渲染的详细介绍,而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,也集成了Vue2.vue-router.vuex.vux-meta(管理页面meta信息的),利用

  • 详解基于Vue+Koa的pm2配置

    详解基于Vue+Koa的pm2配置

    目前使用的技术栈是:前端Vue.后端Koa.数据库Mongodb. 然而每当起服务的时候,都要 npm start . node ./server/app.js ,还要同时保持这两个窗口一直是开着的,很是麻烦. 而且因为我使用的是koa,也没有使用狼叔写的koa脚手架.是自己基于廖雪峰老师的 Koa框架 改的一个小型mvc.导致没有热更新. 为了简化这种没必要的操作及增加热更新,开始想怎么进行优化.于是选择了 pm2 配置pm2 先安装pm2: npm i pm2 . npm i pm2 -g

  • 详解基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单 在未来,CSS.HTMl和文件都会成为原生模块 [0配置] webpack4 设置了默认值,以便无配置启动项目 entry 默认值是 ./src/ output.path 默认值是 ./dist mode 默认值是 production [模块类型] web

  • 详解基于Vue，Nginx的前后端不分离部署教程

    详解基于Vue，Nginx的前后端不分离部署教程

    有小伙伴私信问我vue项目是如何进行前后端不分离打包发布的,那我岂能坐视不管,如此宠粉的我肯定是要给发一篇教程的,话不多说,开始操作 前端假如我们要发布我们的Vue项目,假设我们前端用的是history路由(要发就发个全套的),并且在后端带有一个二级目录,以便于可以在服务器上部署N个项目,在这里后台服务器的话,我用Nginx服务器来给大家模拟,接下来就面对疾风吧: 一.在这里我前端vue项目使用vue cli脚手架进行搭建的,后台使用Nginx,首先是前端配置: 1.前端配置,在这里假如后端访问

  • 详解基于Vue/React项目的移动端适配方案

    详解基于Vue/React项目的移动端适配方案

    前言 本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案. px2rem或postcss-px2rem 在移动端中,为了设配不同的设备,通常使用rem来做适配. rem是通过根元素进行适配的,网页中的根元素指的

  • 详解基于Vue的支持数据双向绑定的select组件

    今天用Vue做一个小项目时需要用到多个select筛选功能,但是原生的太丑,如果直接写在当前页多个select处理起来又太繁琐,第三方ui又太大,所以就自己写了一个,并上传了GitHub仓库,仓库地址:https://github.com/tuohuang/vue-select 使用方法: 引入组件: import VueSelect from '../components/VueSelect' 注册组件 export default { components: { VueSelect } }

  • 详解Django+Vue+Docker搭建接口测试平台实战

    详解Django+Vue+Docker搭建接口测试平台实战

    一. 开头说两句 大家好,我叫林宗霖,是一位测试工程师,也是全栈测开训练营中的一名学员. 在跟着训练营学习完Docker容器技术系列的课程后,理所应当需要通过实操来进行熟悉巩固.正好接口自动化测试平台需要迁移到新的测试服务器上,就想要体验一番Docker的"一次构建,处处运行".这篇文章简单介绍了下这次部署的过程,其中使用了Dockerfile定制镜像和Docker-Compose多容器编排. 二. 项目介绍 项目采用的是前后端分离技术来实现的,前端是Vue+ElementUI,后端是

  • 详解基于Android的Appium+Python自动化脚本编写

    1.Appium Appium是一个开源测试自动化框架,可用于原生,混合和移动Web应用程序测试, 它使用WebDriver协议驱动iOS,Android和Windows应用程序. 通过Appium,我们可以模拟点击和屏幕的滑动,可以获取元素的id和classname,还可以根据操作生成相关的脚本代码. 下面开始Appium的配置. appPackage和APPActivity的获取 任意下载一个app 解压 但是解压出来的xml文件可能是乱码,所以我们需要反编译文件. 逆向AndroidMan

随机推荐