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

2024-10-07 15:58:53

前言

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

正文

我们都知道，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路由的时候，不会执行销毁操作：

可以看到，在返回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，依旧是这样。

原因

由于<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是访问不到的。

方法二

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

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

同样能实现效果。

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

总结

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

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

vue中keep-alive内置组件缓存的实例代码

需求: home 组件中有一个 name 的 data 数据.这个数据修改之后,再切换到其他的组件.再切换到 home 组件,希望 home 中 name 这个值是之前修改过的值.希望组件有缓存. keep-alive 的使用方式: 将要缓存的组件使用 keep-alive 包裹住即可. keep-alive优点的介绍: 1. 切换组件时,当前组件不会触发销毁的生命周期钩子.也就是说不会销毁了. 2. 切换回来时,也不会重新创建.(既然都没有被销毁,哪里来的重新创建呢) 3. 会多出两个生命周期
vue.js内置组件之keep-alive组件使用

keep-alive是Vue.js的一个内置组件.<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. 它提供了include与exclude两个属性,允许组件有条件地进行缓存. 举个栗子 <keep-alive> <router-view
vue组件 keep-alive 和 transition 使用详解

1.keep-alive 能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. // 组件 export
vue里如何主动销毁keep-alive缓存的组件

问题产生的背景我们一个后台,在切换一些标签页的时候,是使用的 keep-alive 缓存的标签页,也使用了 include 属性来决定哪个页面进行缓存,而标签页的切换实际上是路由的切换,也就是说打开一个新标签页的时候,url 会跟着变化,老的标签页如果在 keep-alive 的 include 范围内那就会缓存下来. 然后客服人员就反馈页面开的久了就会崩溃,因为他们基础上不会刷新页面(工作需要),又总有切换标签的习惯,最后导致内存越来越大最后崩溃. 依赖环境这个项目是基于一个开源 vue
vue中keep-alive组件的入门使用教程

一.问题触发并解决最近自己在写vue练习,内容相对简单,主要是对vue进行熟悉和相关问题发现,查漏补缺.简单说下练习的项目内容及问题的产生: 练习使用的vue-cli 2.0脚手架搭建,内容就是简单的仿音乐播放app,功能也相对简单,大体就是单页router切换各个专辑列表,点击进入专辑内容页面,单击歌曲名称可以进行播放.暂停.下一曲功能. 简单的背景介绍完了,说下问题产生的情形:在从整个歌曲列表页点击跳转到单个专辑列表页,然后点击返回按钮返回歌曲列表页时,页面保存了之前的浏览位置,但是接口重
Vue中keep-alive组件作用详解

keep-alive组件的作用,供大家参考作用:用于保留组件状态或避免重新渲染(缓存的作用) 比如:当一个目录页面与一个详情页面,用户经常:打开目录页面=>进入详情页面=>返回目录页面=>打开详情页面,这样目录页面就是一个使用频率很高的页面,那么就可以对目录组件使用<keep-alive></keep-alive>进行缓存,这样用户每次返回目录时,都能从缓存中快速渲染,而不用重新渲染. 属性该标签有两个属性include与exclude: include:字符
vue 使某个组件不被 keep-alive 缓存的方法

提出问题最近在做项目发现一个问题,当我使用了 keep-alive 标签后,进入了某个路由进行一系列操作,再点击浏览器后退,再次进入刚才的路由,页面被操作的数据没有初始化! 分析问题这是因为 keep-alive 将路由页面缓存,所以该路由没有完成整个生命周期,没有 destroyed,因此重新进入也没有触发其他生命周期钩子,如 created 等. 解决问题 (1). 查看官方文档当组件在 keep-alive 内被切换,它的 activated 和 deactivated 这两个生命周
vue keep-alive 动态删除组件缓存的例子

业务需求: 切换tab页标签的时候(路由前进的时候),缓存当前组件数据,关闭tab页标签的时候清除组件缓存. 实现: 1.先在store的state里面设置一个要缓存数组 2.在进到子页面的时候,更新store的数组,把将要缓存组件的name(注意:是组件的name,并不是路由的name),装进数组 3.当前组件的route-view,外层包裹keep-alive,include用你从仓库里面取出来的数组 4.关闭标签页(也就是后退路由的时候),清空store里的数组总结:通过动态的设置inc
vue中的router-view组件的使用教程

开发的时候有时候会遇到比如点击这个链接跳转到其他组件的情况,氮素,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用. 比如我们在一个导航组件中写了三个导航链接,他们的地址分别为:/food,/rating,/seller,点击每个导航链接都会跳转到不同的组件,我们通过<router-view></router-view> <template> <div class="navbar"> &l
Vue中封装input组件的实例详解

Vue中封装input组件最近有点忙不过来脱了很久,没有更新抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板码友们可以更具自己的实际项目添加需要的参数我的项目中的UI图是这样的代码如下子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>
vue中如何让子组件修改父组件数据

一.关于vue中watch的认识我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候 •1.常见的使用场景 ... watch:{ value(val) { console.log(val); this.visible = val; } } ... •2.如果要一开始就执行 ... watch: { firstName: { handler(newName, oldName) { this.fullName = newName + '-' + this.lastName;
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

业务场景重现现在我的App.vue里面有一个头部的公共组件,头部组件里有一个输入框,当我输入词条时,将词条传进App.vue里的<router-view>里的.vue页面,并进行查询获取数据解决思路如下: 1.如何拿到头部的词条 2.当词条改变时如何触发.vue里的请求数据事件解决方案我是用vuex数据仓库来存储词条的,当词条改变时,修改数据仓库里的词条然后在.vue页面里监听这个词条,当词条改变时触发请求数据的事件代码数据仓库store.js import Vue from '
Vue 中可以定义组件模版的几种方式

前端组件化开发已经是一个老生常谈的话题了,组件化让我们的开发效率以及维护成本带来了质的提升. 当然因为现在的系统越来越复杂庞大,所以开发与维护成本就变得必须要考虑的问题,因此滋生出了目前的三大前端框架 Vue.Angular.React. 那今天我们就来看看 Vue 中有哪些定义组件模版的方式以及他们之间的一些差别. 字符串形式 Vue 最简单直接的一种定义组件模版的方式,但是方式写起来很不友好,就像我们以前拼接 HTML 元素是一样的,很痛苦,所以我们并不常用 Vue.component("m
vue中使用element组件时事件想要传递其他参数的问题

在使用element的上传组件时在一下几个钩子中传递其他参数图中是文件上传时的几个钩子,参数为文件或文件列表或者其他参数,但是现在我想在原有参数上传递其他参数.比如我想在on-success的钩子中传递一个自定义参数i,原本是这样写的: :on-success="handleSuccess(i)" //handleSuccess是一个方法但是发现这样写取不到自身原来的参数,后来在网上找到了一个比较好的方法,如下: :on-success="(value)=> han
Vue中的异步组件函数实现代码

具体代码如下所示: export default new Router({ routes: [ { path: '/live', name: 'live', component: () => import('@/view/live/live.vue') } ] }) 上面的代码是很常见的router代码分割,只在代码路由为live才会去加载live.vue 但这样在live.vue获取的过程将是一片空白,什么也没有,体验不好, 利用vue提供的异步组建可以解决新建一个 loadable.vue
vue中使用elementUI组件手动上传图片功能

Vue框架简介 Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合.是基于MVVM(Model-View-ViewModel)设计思想.提供MVVM数据双向绑定的库,专注于UI层面使用elementUI上传图片时遇到跨域问题,所以需要自己写一个手动上传图片的方法代码: html <el-upload class="upload-demo" ref="upload"//绑定ref 清空时会用到 :lim
Vue中关闭弹窗组件时销毁并隐藏操作

背景:在dialog弹窗组件中执行mounted钩子,将数据初始化,等取消关闭弹窗后,发现mounted钩子不执行原因:在vue的生命周期中,在页面初始化的时候mounted只会执行一次,关闭弹窗页面并没有销毁,所以不会再次执行 <select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup='showExperienceGroup' @closeCover="handleExper
详解vue中在父组件点击按钮触发子组件的事件

我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg 4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中父组件 <template> <div id="app&qu

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

相关推荐

随机推荐