侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 5年前   936

动态路由

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

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

{  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 。

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

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

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

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

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

keep-alive

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

keep-alive通过缓存Vnode的方式解决了SPA最为关键的性能问题。以下,我就按步骤来分析以下:

一、路由触发路由组件重新render的问题

1、不缓存模式:

每次切换都会重新 render ,执行整个生命周期,每次切换时,重新 render ,重新请求,,必然不满足需求。

2、缓存模式:

 

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

二、router-view 数据缓存问题

keep-alive 采用 render 函数来创建 Vnode ,一下是 vue v2.5.10 的 keep-alive.js 的 render() :

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 的数据。

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

一、bug表象

最开始其实是不知道这个 bug 的,也是通过现象反推,然后由源码解决这个问题的,那就先从现象说起:

动态路由缓存的的具体表现在:

由动态路由配置的路由只能缓存一份数据。 keep-alive 动态路由只有第一个会有完整的生命周期,之后的路由只会触发 actived 和 deactivated 这两个钩子。 一旦更改动态路由的某个路由数据,期所有同路由下的动态路由数据都会同步更新。

我们的期望其实是在使用 keep-alive 的情况下,动态路由能有非动态的表现,即拥有 完整的生命周期 、 各自的数据缓存 。

二、发掘问题关键

入手 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 依然能正常运行。

修改Vue源码

上面说到了是因为动态路由组件名的问题,如果将缓存的 key 设置为唯一不就行了吗?

于是在 router-view 上配置key,key取得师path,永远唯一:

 

然后修改 keep-alive.js 源码,如下(因为放假的关系不详细说了,直接贴源码,实现的人就是我,也是第一个,github上此BUG目前还是open状态):

/* *@flow*modify by LK 20190624*/import { isRegExp, remove } from 'shared/util'import { getFirstComponentChild } from 'core/vdom/helpers/index'type VNodeCache = { [key: string]: ?VNode };function getComponentName (opts: ?VNodeComponentOptions): ?string { return opts && (opts.Ctor.options.name || opts.tag)}function matches (pattern: string | RegExp | Array, key: string | Number): boolean { if (Array.isArray(pattern)) {  return pattern.indexOf(key) > -1 } else if (typeof pattern === 'string') {  return pattern.split(',').indexOf(key) > -1 } else if (isRegExp(pattern)) {  return pattern.test(key) } /* istanbul ignore next */ return false}function pruneCache (keepAliveInstance: any, filter: Function) { const { cache, keys, _vnode } = keepAliveInstance for (const key in cache) {  const cachedNode: ?VNode = cache[key]  if (cachedNode) {   // const name: ?string = getComponentName(cachedNode.componentOptions)   if (key && !filter(key)) {    pruneCacheEntry(cache, key, keys, _vnode)   }  } }}function pruneCacheEntry ( cache: VNodeCache, key: string, keys: Array, current?: VNode) { const cached = cache[key] if (cached && (!current || cached.tag !== current.tag)) {  cached.componentInstance.$destroy() } cache[key] = null remove(keys, key)}const patternTypes: Array = [String, RegExp, Array]export default { name: 'keep-alive', abstract: true, props: {  include: patternTypes,  exclude: patternTypes,  max: [String, Number] }, created () {  this.cache = Object.create(null)  this.keys = [] }, destroyed () {  for (const key in this.cache) {   pruneCacheEntry(this.cache, key, this.keys)  } }, mounted () {  this.$watch('include', val => {   pruneCache(this, key => matches(val, key))  })  this.$watch('exclude', val => {   pruneCache(this, key => !matches(val, key))  }) }, render () {  const slot = this.$slots.default  const vnode: VNode = getFirstComponentChild(slot)  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  const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions  if (componentOptions) {   // check pattern   const name: ?string = getComponentName(componentOptions)   const { include, exclude } = this   if (    // not included    (include && (!key || !matches(include, key))) ||    // excluded    (exclude && key && matches(exclude, key))   ) {    return vnode   }   const { cache, keys } = this   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]) }}

如何集成

因为放假赶车的关系,粗略说一下,有问题直接在底下评论:

一、修改package.json:

npm install时不下载 vue ,修改 packjson.js 改为本地的 vue:"vue": "file:./vue2.5.0/"

"dependencies": { "axios": "^0.18.0", "clipboard": "^2.0.0", "codemirror": "^5.38.0", "countup": "^1.8.2", "cropperjs": "^1.2.2", "dayjs": "^1.7.7", "echarts": "^4.0.4", "html2canvas": "^1.0.0-alpha.12", "iview": "^3.2.2", "iview-area": "^1.5.17", "js-cookie": "^2.2.0", "simplemde": "^1.11.2", "sortablejs": "^1.7.0", "tree-table-vue": "^1.1.0", "v-org-tree": "^1.0.6", "vue": "file:./vue2.5.0/", "vue-i18n": "^7.8.0", "vue-router": "^3.0.1", "vuedraggable": "^2.16.0", "vuex": "^3.0.1", "wangeditor": "^3.1.1", "xlsx": "^0.13.3"},

二、修改所有本地 import vue 为本地文件:

// import Vue from 'vue'import Vue from '../vue-2.5.10/src/core/index'

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

您可能感兴趣的文章:

  • Vue动态路由缓存不相互影响的解决办法
  • vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
  • vue spa应用中的路由缓存问题与解决方案
  • 关于vue路由缓存清除在main.js中的设置
  • vue实现路由不变的情况下,刷新页面操作示例
  • vue.js使用watch监听路由变化的方法
  • 详解vue 路由跳转四种方式 (带参数)
  • Vue+axios 实现http拦截及路由拦截实例
  • vue通过路由实现页面刷新的方法
  • Vue实现路由跳转和嵌套
  • 详解vue嵌套路由-params传递参数
  • vue路由缓存的几种实现方式小结


  • 上一条:
    ajax实现点击不同的链接让返回的内容显示在特定div里
    下一条:
    用ajax实现在单击事件下加载一个DIV层的脚本
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客