详解Vue路由开启keep-alive时的注意点

这个不是业务的要求,但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM,觉得作为一个前端工程师有必要优化下的加载逻辑,正好vue提供了keep-alive的功能,所以就试用了下。当然,干任何事儿都不会一帆风顺的,在路上的磕磕碰碰在所难免,故在此记录下遇到的问题,希望看到这篇文章的人能有所帮助。ps:这个也没多难。

HTML部分:

<template>
 <div class="app">
  <keep-alive>
   <router-view></router-view>
  </keep-alive>
 </div>
</template>

JavaScript部分:

.....

  created: function () {
   console.log(1)
  },
  mounted: function () {
   console.log(2)
  },
  activated: function () {
   console.log(3)
  },
  deactivated: function () {
   console.log(4)
  }

.....

1. 什么阶段获取数据

页面生命周期钩子如上面的代码所示,这四个是最常用到的部分。这部分需要注意下,当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

我们知道keep-alive之后页面模板第一次初始化解析变成HTML片段后,再次进入就不在重新解析而是读取内存中的数据,即,只有当数据变化时,才使用VirtualDOM进行diff更新。故,页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

所以,应该activated中留一份数据获取的代码,或者不要created部分,直接将created中的代码转移到activated中。

2. $route中的数据读不到

以前的写法是在data中将需要的$route数据进行赋值,便于其余方法使用,但是使用了keep-alive后数据需要进入页面在activated中再次获取,才能达到更新的目的。定义一个initData方法,然后在activated中启动。

initData: function () {
    let _this = this;
    _this.fromLocation = JSON.parse(this.$route.query.fromLocation);
    _this.toLocation = JSON.parse(this.$route.query.toLocation);
    _this.activeIndex = parseInt(this.$route.params.activeIndex) || 0;
    _this.policyType = parseInt(this.$route.params.policyType) || 0;
   },

3. 当页动态修改url

需求描述:当页面在进行轮播操作的时候希望能记录当前显示的轮播ID(activeIndex)。当进入下一个页面再返回的时候能记住之前的选择,将轮播打到之前的ID位置。所以我想将这部分信息固化在url中,轮播发生变化时,修改URL。这样实现比较符最小修改原则,其余页面不用变动。

之前的写法是将activeIndex放在$route的query中,当轮播后,将activeIndex的值存入$route.query.activeIndex中,然后$router.replace当前路由,理论上应该能发生变化,但实际没有。

查看文档后说,$route是只读模式。当然,对象部分是他监管不到的,我修改了并不是正统的做法。

神奇的地方来了:当我将activeIndex记在params中,轮播变动修改params中的参数,然后$router.replace当前路由,却能发生对应的变化。代码如下:

let swiperInstance = new Swiper('#swiper', {
  pagination: '.swiper-pagination',
  paginationClickable: false,
  initialSlide: activeIndex,
  onSlideChangeEnd: function (swiper) {
    let _activeIndex = swiper.activeIndex;
    _this.$route.params.activeIndex = _activeIndex;
    // $router我放到了window上方便调用
    window.$router.replace({
      name: _this.$route.name,
      params: _this.$route.params,
      query: _this.$route.query
    });
    // 根据activeIndex,在这里初始化下面显示的数据
    _this.transferDetail = _this.allData.plans[_activeIndex].segments;
    _this.clearBusDetailFoldState();
  }
});

4. 事件如何处理

估计你也能猜到,发生的问题是事件绑定了很多次,比如上传点击input监听change事件,突然显示了多张相同图片的问题。

也就是说,DOM在编译后就缓存在内容中了,如果再次进入还再进行事件绑定初始化则就会发生这个问题。

解决办法:在mounted中绑定事件,因为这个只执行一次,并且DOM已准备好。如果插件绑定后还要再执行一下事件的handler函数的话,那就提取出来,放在activated中执行。比如:根据输入内容自动增长textarea的高度,这部分需要监听textarea的input和change事件,并且页面进入后还要再次执行一次handler函数,更新textarea高度(避免上次输入的影响)。

5. 地图组件处理

想必这是使用keep-alive最直接的性能表现。之前是进入地图页面后进行地图渲染+线路标记;现在是清除以前的线路标记绘制新的线路,性能优化可想而知!

我这里使用的是高德地图,在mounted中初始化map,代码示例如下:

export default {
  name: 'transferMap',
  data: function () {
    return {
      map: null,
    }
  },
  methods: {
    initData: function () {},
    searchTransfer: function (type) {},
    // 地图渲染 这个在transfer-map.html中使用
    renderTransferMap: function (transferMap) {}
  },
  mounted: function () {
    this.map = new AMap.Map("container", {
      showBuildingBlock: true,
      animateEnable: true,
      resizeEnable: true,
      zoom: 12 //地图显示的缩放级别
    });
  },
  activated: function () {
    let _this = this;
    _this.initData();
    // 设置title
    setDocumentTitle('换乘地图');
    _this.searchTransfer(_this.policyType).then(function (result) {
      // 数据加载完成
      // 换乘地图页面
      let transferMap = result.plans[_this.activeIndex];
      transferMap.origin = result.origin;
      transferMap.destination = result.destination;
      // 填数据
      _this.transferMap = transferMap;
      // 地图渲染
      _this.renderTransferMap(transferMap);
    });
  },
  deactivated: function () {
    // 清理地图之前的标记
    this.map.clearMap();
  },
}

6. document.title修改

这个不是keep-alive的问题,不过我也在这里分享下。

问题是,使用下面这段方法,可以修改Title,但是页面来回切换多次后就不生效了,我也不知道为啥,放到setTimeout中就直接不执行。

document.title = '页面名称';

下面是使用2种环境的修复方法:

纯js实现

function setDocumentTitle(title) {
  "use strict";
  //以下代码可以解决以上问题,不依赖jq
  setTimeout(function () {
    //利用iframe的onload事件刷新页面
    document.title = title;
    var iframe = document.createElement('iframe');
    iframe.src = '/favicon.ico'; // 必须
    iframe.style.visibility = 'hidden';
    iframe.style.width = '1px';
    iframe.style.height = '1px';
    iframe.onload = function () {
      setTimeout(function () {
        document.body.removeChild(iframe);
      }, 0);
    };
    document.body.appendChild(iframe);
  }, 0);
}

jQuery/Zepto实现

function setDocumentTitle(title) {
  //需要jQuery
  var $body = $('body');
  document.title = title;
  // hack在微信等webview中无法修改document.title的情况
  var $iframe = $('<iframe src="/favicon.ico"></iframe>');
  $iframe.on('load', function () {
    setTimeout(function () {
      $iframe.off('load').remove();
    }, 0);
  }).appendTo($body);
}

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

(0)

相关推荐

  • Vue keep-alive实践总结(推荐)

    <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓

  • vue使用keep-alive实现数据缓存不刷新

    到现在,接触vue也小段时间了,项目进行到了一定程度,然而项目缺少了缓存机制,所以每次跳转页面都会重新created一下数据,虽说系统的数据请求速度很快,但是这样做对系统的性能会有很大的坏处的,所以到这里就要对系统优化下,添加缓存了. 其实到现在,对于vue还是没有玩通,每深挖一次,就会发现一次vue的精彩,开始不清楚要用什么实现缓存,找了好久,有好几种说法,就是用vuex.vuet或者keep-alive,然后对比了一下,在我认为,vuex和vuet是实现状态管理,重心是在数据处理上:想要实现

  • vue2.0 keep-alive最佳实践

    vue2.0 keep-alive的最佳实践,供大家参考,具体内容如下 1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 <keep-alive> <component> <!-- 组件将被缓存 --> </component> </keep-alive> 有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的 在使用keep-alive的情况下 <keep-al

  • 深入理解vue-router之keep-alive

    本文基于 Vue2.0 keep-alive 简介 keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染. 用法也很简单: <keep-alive> <component> <!-- 该组件将被缓存! --> </component> </keep-alive> props include - 字符串或正则表达,只有匹配的组件会被缓存 exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存 /

  • 详解Vue路由开启keep-alive时的注意点

    这个不是业务的要求,但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM,觉得作为一个前端工程师有必要优化下的加载逻辑,正好vue提供了keep-alive的功能,所以就试用了下.当然,干任何事儿都不会一帆风顺的,在路上的磕磕碰碰在所难免,故在此记录下遇到的问题,希望看到这篇文章的人能有所帮助.ps:这个也没多难. HTML部分: <template> <div class="app"> <keep-alive> <router-vie

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 详解vue路由

    前端路由和后端路由: 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现 在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由 路由的使用 1.创建一个路由对象,当导入vue-router包之后,在window全局对象中就有一个路由的构造函

  • 详解Vue路由History mode模式中页面无法渲染的原因及解决

    Vue下路由History mode导致页面无法渲染的原因 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 一般开发的单页应用的URL都会带有#号的hash模式,因为整个应用本身而言就只有一个HTML,其他的都是通过router来渲染.如果因为业务

  • 详解Vue 路由组件传参的 8 种方式

    我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4 . 编程式路由传参 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. 1. 通过 params 传递 路由配置 路径参数 用冒号 : 表示. const routes = [ // 动态段以冒号开始 { pat

  • 详解Vue路由传参的两种方式query和params

    Vue路由传参的两种方式query和params 一.router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to=&

  • 详解Vue路由钩子及应用场景(小结)

    一. 路由钩子语法 在vue-router的官方文档中, 将路由钩子翻译为导航守卫, 下面是文档中的内容摘要, 大家也可以通过传送门前往官网阅读详细内容 路由钩子 路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的,靠..好拗口啊. 总体来讲vue里面提供了三大类钩子 1.全局钩子 2.某个路由独享的钩子 3.组件内钩子 三种路由钩子中都涉及到了三个参数,这里直接上官方介绍吧 to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 nex

  • 详解vue路由篇(动态路由、路由嵌套)

    什么是路由?网络原理中,路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它决定的是一个端到端的网络路径. web中,路由的概念也是类似,根据URL来将请求分配到指定的一个'端'.(即根据网址找到能处理这个URL的程序或模块) 使用vue.js构建项目,vue.js本身就可以通过组合组件来组成应用程序:当引入vue-router后,我们需要处理的是将组件(components)映射到路由(routes),然后在需要的地方进行使用渲染. 一.基础路由 1.创建vue项目,执行

  • 详解Vue路由自动注入实践

    什么是路由自动注入 路由自动注入概念学习自nuxt,我们不需要在 router.js 中每次手动输入代码引入模块而是自动根据 文件目录格式 生成 router.js 我们把这个功能独立成一个 webpack 插件,并对相关功能进行了完善,而且实现了 vue-router 的所有核心功能 更详细使用指南和文档可以查看我们的 github仓库 举一个简单的列子,比如你的目录长这样 src ├── views │ ├── Login │ │ └── Index.vue │ └── User │ ├──

  • 详解Vue中的keep-alive

    目录 1. 简介 2. 使用 2.1 参数 2.2 生命周期函数 2.3 应用场景 总结 1. 简介 keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中. 作用: 在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性. 原理: 在 created 函数调用时将需要缓存的 V

随机推荐