修改vue源码实现动态路由缓存动态路由

时间 2020-02-03

原文原文链接

修改vue源码实现动态路由缓存javascript

动态路由

官网解读：咱们常常须要把某种模式匹配到的全部路由，全都映射到同个组件。例如，咱们有一个 User 组件，对于全部 ID 各不相同的用户，都要使用这个组件来渲染。那么，咱们能够在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果。

即若是你有一个盘点录入单路由，但你想经过不一样的传不一样的ID来加载CheckInputInfo这个组件，若采用params方式，这时只须要在path后面配置/:taskId便可实现CheckInputInfo/1和CheckInputInfo/2这样的路由，同时能够经过this.$route.params.taskId来获取当前路由的taskId。php

{
    path: 'CheckInputInfo/:taskId',
    meta: {
      title: '盘点录入单'
    },
    name: 'CheckInputInfo',
    component: () => import('@/view/Check/CheckInputInfo.vue')
  }
复制代码

相似的，一样也可以使用query方式，这时只须要在path后面配置:taskId便可实现CheckInputInfo?taskId=1和CheckInputInfo?taskId=2这样的路由,同时能够经过this.＄route.query.taskId来获取当前路由的taskId。html

{
    path: 'CheckInputInfo:taskId',
    meta: {
      title: '盘点录入单'
    },
    name: 'CheckInputInfo',
    component: () => import('@/view/Check/CheckInputInfo.vue')
  }
复制代码

vue-router经过配置params和query来实现动态路由，并可经过this.＄route.xx来获取当前的params或query，省去了直接操做或处理window.location，仍是挺方便的。vue

注意：当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。由于两个路由都渲染同个组件，比起销毁再建立，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

解读：在不使用keep-alive的状况下，咱们每次加载路由，这时会从新render当前路由挂载的component，但若这两个路由是同一个路由组件配置的动态路由，vue为了性能设计了不会从新render。java

这显然不符合咱们的预期，那么该如何在动态路由下拥有完整的生命周期呢？答案是keep-alive。node

keep-alive

官网解读：keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 类似，keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出如今组件的父组件链中。在 2.2.0 及其更高版本中，activated 和 deactivated 将会在树内的全部嵌套组件中触发。当组件在内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

keep-alive经过缓存Vnode的方式解决了SPA最为关键的性能问题。如下，我就按步骤来分析如下：ios

1、路由触发路由组件从新render的问题

一、不缓存模式：

<router-view></router-view>
复制代码

每次切换都会从新render，执行整个生命周期，每次切换时，从新render，从新请求，，必然不知足需求。git

二、缓存模式：

<keep-alive>
  <router-view></router-view>
</keep-alive>
复制代码

只是在进入当前路由的第一次render，来回切换不会从新执行生命周期，且能缓存router-view的数据。github

2、router-view 数据缓存问题

keep-alive采用render函数来建立Vnode，一下是vue v2.5.10的keep-alive.js的render()：web

render () {
    const slot = this.$slots.default
    const vnode: VNode = getFirstComponentChild(slot)
    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
      // check pattern
      const name: ?string = getComponentName(componentOptions)
      const { include, exclude } = this
      if (
        // not included
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }

      const { cache, keys } = this
      const key: ?string = vnode.key == null
        // same constructor may get registered as different local components
        // so cid alone is not enough (#3269)
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        remove(keys, key)
        keys.push(key)
      } else {
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }

      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }
}
复制代码

在render是获取到Vnode，若cache[key]存在，则:

vnode.componentInstance = cache[key].componentInstance
复制代码

不然，将Vnode保存在cache里：

cache[key] = vnode
复制代码

因而当时用keep-alive时，咱们就能够保存每一个route-view的数据。

动态路由缓存问题及如何实现

1、bug表象

最开始实际上是不知道这个bug的，也是经过现象反推，而后由源码解决这个问题的，那就先从现象提及：

动态路由缓存的的具体表如今：

由动态路由配置的路由只能缓存一份数据。

keep-alive动态路由只有第一个会有完整的生命周期，以后的路由只会触发 actived 和 deactivated这两个钩子。

一旦更改动态路由的某个路由数据，期全部同路由下的动态路由数据都会同步更新。

咱们的指望实际上是在使用keep-alive的状况下，动态路由能有非动态的表现，即拥有完整的生命周期、各自的数据缓存。

2、发掘问题关键

入手keep-alive源码发现，其实问题就出如今这一步：

if (
  // not included
  (include && (!name || !matches(include, name))) ||
  // excluded
  (exclude && name && matches(exclude, name))
) {
  return vnode
}
复制代码

经过上面的表象其实能够探究出，router-view实际上是已经缓存了，并且一个动态路由的router-view都是经过了if判断返回了Vnode。那么再看一下这个name是什么：

function getComponentName (opts: ?VNodeComponentOptions): ?string {
  return opts && (opts.Ctor.options.name || opts.tag)
}
const name: ?string = getComponentName(componentOptions)
复制代码

这里的opts其实对应的就是VueComponent的＄options，而this.＄options.name不就是对应着得.vue文件里声明的name属性。而后又想到，怪不得配置路由的时候要求提供的name属性要和组件内部的name值保持一致。

看到这里，问题已经水落石出了，由于动态路由配置的组件相同，getComponentName每次返回相同name，而后render()去缓存了相同的Vnode，且只能缓存了一份。既然如此，只要能正确的缓存Vnode和取出Vnode，动态路由状况下，keep-alive依然能正常运行。