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


Posted in Javascript onJune 20, 2017

这个不是业务的要求,但是看到每次进入页面就重新渲染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);
}

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

Javascript 相关文章推荐
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
教你一步步实现一个简易promise
Nov 02 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 #jQuery
详解Node.js access_token的获取、存储及更新
Jun 20 #Javascript
详解angular 中的自定义指令之详解API
Jun 20 #Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 #Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 #Javascript
Vue实现路由跳转和嵌套
Jun 20 #Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 #Javascript
You might like
实用函数7
2007/11/08 PHP
php之XML转数组函数的详解
2013/06/07 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
PHP连接access数据库
2015/03/27 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
介绍一下write命令
2012/09/24 面试题
《晏子使楚》教学反思
2014/02/08 职场文书
大学生自我鉴定书
2014/03/24 职场文书
财产保全担保书范文
2014/04/01 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python