DDR爱好者之家

修改vue源码实现动态路由缓存的方法
站长资源 2024/11/24 佚名
38 1538
DDR爱好者之家 Design By 杰米

动态路由

官网解读 ：我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 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"htmlcode"> 

{
  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、不缓存模式：

<router-view></router-view>

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

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

2、缓存模式：

<keep-alive>
 <router-view></router-view>
</keep-alive>

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

只是在进入当前路由的第一次 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: "htmlcode">



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: "htmlcode">



<keep-alive :include="cacheList">
 <router-view :key="$route.path"></router-view>
</keep-alive>





然后修改 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]: "color: #ff0000">如何集成


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


一、修改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'





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


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米