Vue中keep-alive组件的深入理解


Posted in Javascript onAugust 23, 2020

前言

最近在写Vue项目的时候,遇到了一个问题,我从A路由使用parmas方式传参跳转到B路由,然后从B路由跳转到C路由,再从C路由返回B路由的时候,发现从A路由传到B路由的参数已经不存在了。

Vue中keep-alive组件的深入理解

正文

我们都知道,vue组件进行路由跳转时,会销毁当前组件。所以从其他路由返回当前路由时,当前路由会重新执行生命周期钩子函数。这就导致了上述问题,A路由传到B路由的参数没了。

当遇到这种问题的时候,我们会首先想到,我们能不能让B路由的数据保存下来呢?这就不得不提到Vue的一个组件了,它就是keep-alive。

keep-alive

<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
在路由出口加上:

<div id="app">
 <keep-alive>
 <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>
 </div>

这样一来的话,如果在路由配置里的meta项加上keepAlive属性且值为true时,当前路由就会被<keep-alive>包裹,变成一个可缓存路由,路由配置:

{
 path: '/order',
 name: 'Order',
 component: () => import('@/views/order/order'),
 meta: {
 keepAlive: true // 需要被缓存
 }
 }

在离开order路由的时候,不会执行销毁操作:

Vue中keep-alive组件的深入理解

可以看到,在返回order路由也就是上述B路由的时候,前一个页面传递过来的数据仍然保留了下来。

<keep-alive>带来的问题

在项目继续进行的时候,出现了另一个问题,当我从选择地址页面选择地址,将地址的id存储到localstorage中,返回order页面并在created生命周期中取到id再进行接口请求,想要拿到这个id相关的地址信息的时候,发现接口请求并未发出:

created() {
 this.userId = JSON.parse(localStorage.getItem("user")).userId
 if (JSON.parse(localStorage.getItem("addressId"))) {
 this.addressId = JSON.parse(localStorage.getItem("addressId"))
 }
 this.getAddress()
 },

于是我在里面加上console.log(1)测试,发现也没有东西打印出来,然后我把created改成mounted,依旧是这样。

Vue中keep-alive组件的深入理解

原因

由于<keep-alive>所包裹的路由具有缓存能力,所以在路由跳转的时候并没有销毁,所以返回来的时候不会执行相关生命周期函数。那么,如果我需要在返回的时候执行例如接口请求之类的操作该怎么办呢?
解决办法

方法一

在需要缓存的页面中使用路由中的beforeRouteEnter方法,只要跳转到了这个路由,这个方法就会执行,在路由跳转前执行相关操作:

beforeRouteEnter(to, from, next) {
  console.log('from', from)
  next(vm => {
  if (from.path == "/selectAddress") {
   // 选择收货地址后返回页面更新收货地址
   vm.addressId = JSON.parse(localStorage.getItem("addressId"))
   vm.getAddress()
  }
  })
 }

vm相当于this,由于路由守卫在导航确认前被调用,因此即将登场的新组件还没被创建,所以直接访问this是访问不到的。

Vue中keep-alive组件的深入理解

方法二

使用activated生命周期钩子函数,这个函数在被 <keep-alive> 缓存的组件激活时调用。

activated () {
  this.addressId = JSON.parse(localStorage.getItem("addressId"))
  this.getAddress()
 },

同样能实现效果。

这里由于我这个页面还需要别的页面跳转过来进行相关操作,要进行路由判断,所以使用的第一种方法。

总结

Vue的 keep-alive 组件可以实现组件数据缓存功能,但是使用时要注意,在组件未销毁时去到当前组件,组件的部分生命周期钩子函数不会执行。这时可以使用 路由守卫 或者是 activated 和 deactivated 生命周期钩子函数实现相关操作。

到此这篇关于Vue中keep-alive组件的深入理解的文章就介绍到这了,更多相关Vue中keep-alive组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery连缀语法如何实现
Nov 29 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
google广告之另类js调用实现代码
Aug 22 #Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 #Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 #Javascript
JavaScript中的函数式编程详解
Aug 22 #Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 #Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 #Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 #Javascript
You might like
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP4引用文件语句的对比
2006/10/09 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
php读取csc文件并输出
2015/05/21 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
php连接mysql数据库
2017/03/21 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
python flask框架实现重定向功能示例
2019/07/02 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
幼儿园教师培训制度
2014/01/16 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
房产授权委托书范本
2014/09/22 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
会议邀请函
2015/01/30 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
JavaScript函数柯里化
2021/11/07 Javascript