阅读 10184

Vue前进刷新后退不刷新,简易页面堆栈实现

这是什么?先看实现效果源码在这

非常感谢XGHeavenjeff_one两位老哥,这个效果应该是页面堆栈,主要模拟原生APP应用导航,然后我的实现的只是这个效果的一部分功能,完整的功能还应该有“同一页面可以有多个实例,拥有不同的状态”,感兴趣的朋友可以去看看vue-navigationvue-page-stackvue-nav

场景

首先这个交互我也叫不出专业的名字,当时我的大致场景是这样的:

  1. 现在有一个小商城,从首页(Index)可以进入商品列表页面(List),这个List是一个无限列表,现在用户往下翻,看到某一个商品似乎比较喜欢,于是点击进入到商品详情页面(Info),看完后觉得比较满意。恩,但是货比三家嘛,于是用户返回商品列表页面,准备继续往下浏览,这时如果你将用户之前的列表刷新了会怎么样?要是我是非常不爽的,这意味着我需要重新操作一波,定位到刚刚中意的商品后,继续往下货比三家。
SomePage -> List: List重新加载
List -> Info -> List: List使用缓存
复制代码
  1. 当用户确定好商品后,决定购买了,于是进入订单页(Form),订单页默认为用户输入了历史收货地址,用户似乎有想要提醒发货的商家,于是填写了备注,然后检查下订单有误否,发现地址可以再修改一下,于是点击收货地址进入到收货地址列表页(Address),选好后我们自动为用户返回到订单页并更新收货地址,如果此时备注没有了会怎么样?
SomePage -> Form: Form重新加载
Form -> Address -> Form: Form使用缓存
复制代码

以上是简单举个例子,实际上这类似我在上家公司做移动端(SPA)时碰到的问题,只不过我们是商家列表,但交互类似,刚开始我是直接用路由方式解决的,类似将Info作为List的子页面,将Address作为Form的子页面。实现是实现了,但太麻烦了,维护麻烦啊😂,并且对组内其它伙伴不太友好。直到某一次我决定对其进行重构,重构前也没有什么好思路,然后Google了一番茅塞顿开:利用keep-alive的include实现,当时知道了思路,我就没往下看了,自己动手丰衣足食😁。

统一一下词汇,下文中说的类列表页就是List,类详情页就是Info

踩坑记

刚开始我还踩了一个坑,主要是Vue的keep-alive当时很少接触,都是Copy......

首先按照之前使用(copy)keep-alive的套路是像这样的:

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
复制代码

然后我将它改造成这样

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<keep-alive :include="include">
  <router-view v-if="!$route.meta.keepAlive"/>
</keep-alive>
复制代码

就是控制这个include,具体的做法是,先在类列表页的路由选项meta中增加一个cacheTo字段,表示对指定页面缓存,值为一个数组,然后:

router.beforeEach((to, from, next) => {
  if (isPageLikeList(from)) {
    // 如果from是类列表页面
    const fromCacheTo = from.meta.cacheTo
    if (fromCacheTo.indexOf(to.name) > -1) {
      // 如果to是类详情页面
      // 将from对应的组件设置缓存
    } else {
      // 移除from缓存
    }
  }
  // ...
})
复制代码

但想的很美,写完发现Bug比较严重,类列表页缓存老失效,为什么呢?这就要从keep-alive的include机制说起了,于是看了一下keep-alive的源码,源码中有这么一段

  // ...
  mounted () {
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },
  // ...
复制代码

然后继续往下找侦听include的回调逻辑

function pruneCache (keepAliveInstance: any, filter: Function) {
  // 对于include,filter逻辑为:include包含组件名时返回true,否则返回false
  const { cache, keys, _vnode } = keepAliveInstance
  for (const key in cache) {
    const cachedNode: ?VNode = cache[key]
    if (cachedNode) {
      const name: ?string = getComponentName(cachedNode.componentOptions)
      // 若组件不在include范围中
      if (name && !filter(name)) {
        pruneCacheEntry(cache, key, keys, _vnode)
      }
    }
  }
}

function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  // 销毁组件
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy()
  }
  // 清除组件的缓存
  cache[key] = null
  remove(keys, key)
}
复制代码

大致流程是,include变化后(不管是新增了还是减少了),如果组件不在include中并且当前的cache[组件name]是有缓存的,就执行pruneCacheEntry,销毁组件并清除组件的缓存。

那么这对我上述的逻辑有什么影响呢?按照我之前的流程,动态控制include,这样做删除组件缓存是没有问题,但是新增就会有问题了,因为新增操作发生在从类列表页离开进入到类详情页之前,此时类列表页已经存在了,然后源码中侦听include的流程中也只有清除缓存的操作。

知道了问题,如何解决就很清晰了

实现

分析

我们可以将对include的操作放到类列表页进入前(router.beforeEach),这样就能有效缓存类列表页了,其实这东西就是这么简单,先不管三七二十一,只要是类列表页,进入之前都将其缓存,离开时判断新路由是否是该类列表页指定的类详情页,如果不是就清除缓存。那么在实现之前,咱们先将场景再细化一下,之前简直比玩具还玩具......

SomePage -> List: List重新加载

// 第一种
List -> Info -> List: List使用缓存

// 第二种
List -> Info -> SomePage -> List: List重新加载

// 第三种,不限层级
List -> Info -> OtherList -> OtherInfo -> ... -> List: List、Info、OtherList...使用缓存

其中第三种,从OtherInfo返回OtherList时,OtherInfo应该是要被清除缓存的,依次类推。也就是说,返回时不保留之前的缓存
复制代码

现在,我们根据例举的场景将大致逻辑确定一下。这里有一个点是很明确的,那就是: 我们只需要关心路由切换时的tofrom,从这2个路由对象着手去解决。那么这里可以例举出4中情况:

  1. tofrom都不是类列表页
  2. tofrom都是类列表页
  3. to是类列表页
  4. from是类列表页

现在根据这4种情况细化一下

  1. 第一种情况,tofrom都不是类列表页
    • 不需要缓存,并且可以将之前的缓存全部清除
  2. 第二种情况,tofrom都是类列表页
    • to不在from的配置中,清空缓存,同时要新增to缓存;
    • 否则,保留from的缓存,新增to缓存
  3. 第三种情况,to是类列表页
    • from不在to的配置中,清空缓存,新增to缓存
    • 否则,无需任何处理
  4. 第四种
    • to不在from的配置中,清空缓存

如何判断是否是类列表页?

[
  {
    path: '/list',
    name: 'list',
    meta: {
      cacheTo: ['info']
    }
    // ...
  },
  {
    path: '/info',
    name: 'info',
    // ...
  }
]
复制代码

如上,在路由中维护一个字段如cacheTo,如果配置了组件名,就认为是类列表页面

具体实现

逻辑理清楚咯,接下来具体实现,我们将它做得通用一点(可拔插),并且尽量保证对原项目有较小的侵入性,我将它命名为VKeepAliveChain

首先,如果像踩坑记那样维护include,不太具备可拔插的特性,我还得去搞一个store,那么这个include可以使用Vue.observable处理

// VKeepAliveChain.js
const state = Vue.observable({
  caches: []
})
const clearCache = () => {
  if (state.caches.length > 0) {
    state.caches = []
  }
}
const addCache = name => state.caches.push(name)
复制代码

为了避免像踩坑记那样直接使用<keep-alive :include="include">,我们实现一个函数式组件来解决

// VKeepAliveChain.js
export const VKeepAliveChain = {
  install (Vue, options = { key: 'cacheTo' }) {
    const { key } = options

    // 支持一下自定义key
    if (key) {
      cacheKey = key
    }
    
    // 直接透传children,所以会像keep-alive一样,只拿第一个组件节点
    const component = {
      name: 'VKeepAliveChain',
      functional: true,
      render (h, { children }) {
        return h(
          'keep-alive',
          { props: { include: state.caches } },
          children
        )
      }
    }

    Vue.component('VKeepAliveChain', component)
  }
}
复制代码

现在我们来实现缓存控制的主要逻辑,由于要利用router.beforeEach,约定了尽量小的侵入性,这里可以merge一下。

这个mergeBeforeEachHook方法有同学有疑问,我当时只是为了让后续维护的人知道这里有一个钩子(实际上后面也没关心过),vue-router的beforeEach钩子是可以重复注册的,按照注册顺序执行,这里你可以在Vue.use时将router传人,然后在模块内直接注册一个beforeEach钩子

// VKeepAliveChain.js
const defaultHook = (to, from, next) => next()
export const mergeBeforeEachHook = (hook = defaultHook) => {
  return (to, from, next) => {
    // 缓存控制逻辑
    // 1. 都不是类列表页
    //     清空缓存
    // 2. 都是类列表页
    //     若`to`不在`from`的配置中,清空缓存,同时要新增`to`缓存
    //     保留`from`的缓存,新增`to`缓存
    // 3. 新路由是类列表页
    //     若`from`不在`to`的配置中,清空缓存,新增`to`缓存
    //     否则,无需处理
    // 4. 旧路由是类列表页
    //     若`to`不在`from`的配置中,清空缓存

    const toName = to.name
    const toCacheTo = (to.meta || {})[cacheKey]
    const isToPageLikeList = toCacheTo && toCacheTo.length > 0
    const fromName = from.name
    const fromCacheTo = (from.meta || {})[cacheKey]
    const isFromPageLikeList = fromCacheTo && fromCacheTo.length > 0

    if (!isToPageLikeList && !isFromPageLikeList) {
      clearCache()
    } else if (isToPageLikeList && isFromPageLikeList) {
      if (fromCacheTo.indexOf(toName) === -1) {
        clearCache()
      }
      addCache(toName)
    } else if (isToPageLikeList) {
      if (toCacheTo.indexOf(fromName) === -1) {
        clearCache()
        addCache(toName)
      }
    } else if (isFromPageLikeList) {
      if (fromCacheTo.indexOf(toName) === -1) {
        clearCache()
      }
    }
    return hook(to, from, next)
  }
}
复制代码

那么整个功能就实现了,同时我将它发不到了npm v-keep-alive-chain上。

食用方式

首先引入并注册它

// main.js
import { mergeBeforeEachHook, VKeepAliveChain } from 'v-keep-alive-chain'

Vue.use(VKeepAliveChain, {
  key: 'cacheTo' // 可选的 默认为cacheTo
})

// 如果你没有注册过beforeEach
router.beforeEach(mergeBeforeEachHook())

// 如果有注册beforeEach
router.beforeEach(mergeBeforeEachHook((to, from, next) => {
  next()
}))
复制代码

然后在App.vue(视你的情况而定)中

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<VKeepAliveChain>
  <router-view v-if="!$route.meta.keepAlive"/>
</VKeepAliveChain>
复制代码

接着在router中配置你的需求

[
  {
    path: '/list',
    name: 'list',
    meta: {
      cacheTo: ['info']
    }
    // ...
  },
  {
    path: '/info',
    name: 'info',
    // ...
  }
]
复制代码

然后就能愉快的玩耍了

注意事项

  1. 路由配置不能少了name属性,并且这个name需要和组件name一样
  2. cacheTo优先级小于keepAlive,所以,处理这种需求的页面不要设置keepAlive
  3. 可以设置2个页面之前仅在相互切换时缓存,不过我还没发现可用的场景
  4. webpack、vue-cli一般我是拿来即用的,打包的脚手架是vue-cli4.0,很少深入研究这些东西,然后我看了下发布到npm包的源码,发现有很多无用的polyfill被打进去了,导致Gzip的包都有4Kb多,暂时还没有找到解决方法,知晓的朋友麻烦告知一下啊😂

文章写的比较快,如有什么错误,可以下方留言咯

朋友,看到这里,希望文章对你有启发,本人非常欢迎技术交流,如果你觉得文章对你有用,还请给老弟一个👍,平时我是不在乎这些个的,但由于我马上要投递简历了,需要点东西撑门面,没得办法,履历太差了,谢谢你,愿生活带给你美好!!!

关注下面的标签,发现更多相似文章
评论