-
2021-10-26 16:26:16
动态组件在切换的过程中,组件的实例都是「重新创建」的,而我们需要保留组件状态。
为了解决这个问题,你还需要使用 vue 内置组件 <keep-alive>。
<!-- 组件内部--> <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件,比如 Home! --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!-- 这里是不被缓存的视图组件,比如 Edit! --> </router-view>
//router/index.js export default [ { path: '/', name: 'home', component: Home, meta: { keepAlive: true // 需要被缓存 } }, { path: '/:id', name: 'edit', component: Edit, meta: { keepAlive: false // 不需要被缓存 } } ]
可以选择性的进行组件的缓存
<keep-alive> 提供了两个属性 include 与 exclude。
- include:只有名称匹配的组件会被缓存。
- exclude:任何名称匹配的组件都不会被缓存。
<keep-alive include="a,b"></keep-alive> <keep-alive :include="/a|b/"></keep-alive> <keep-alive :include="['a', 'b']"></keep-alive>
更多相关内容 -
详解Vue中组件的缓存
2020-10-17 03:20:07主要介绍了Vue中组件的缓存,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
Vue 中的组件缓存
2021-07-24 11:24:11一、介绍 先来看一个问题? 从首页的区块链模块切换到文章详情页面,再从文章详情页面回到首页,我们发现首页... 主要用于保留组件状态或避免重新渲染,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们一、介绍
先来看一个问题?
从首页的区块链模块切换到文章详情页面,再从文章详情页面回到首页,我们发现首页重新渲染原来的状态没有了,又回到了推荐模块。
首先,这是正常的状态,并非问题,路由在切换的时候会销毁切出去的页面组件,然后渲染匹配到的页面组件。
但是我想要某些页面保持状态,而不会随着路由切换导致重新渲染。
二、解决方案
使用 keep-alive 缓存组件
官方文档:在动态组件上使用 keep-alive
主要用于保留组件状态或避免重新渲染,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
(1)组件缓存不是持久化,它只是在应用运行期间不会重新渲染,如果页面刷新还是会回到初始状态。
(2) 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
(3) 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全局注册。
(4)组件生命周期钩子和缓存
(5)include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。<!-- 逗号分隔字符串 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正则表达式 (使用 `v-bind`) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 数组 (使用 `v-bind`) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>
匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
三、项目中的缓存配置
参考链接:
https://juejin.im/post/5d22f0f3f265da1b94216d0b
问题描述:
我们希望-
登录成功后,就把缓存给清除掉,让组件重新进行渲染。
-
等页面渲染完成后,再给页面加上缓存(keep-alive)
实现思路:给keep-alive 的include属性绑定一个动态的数组,因为keep-alive只会缓存include数组中的组件
首页在Vuex容器中定义这个动态数组cachePages:
然后,在用户登录成功之后,清除layout组件的缓存:
这样就解决了上面提到的,用户1登录后退出登录,使用用户2的账号登录时,”我的“页面的个人信息展示的还是用户1的个人信息的问题。
但是此时,layout组件没有缓存,当登录的用户从区块链频道点击 某篇文章 -> 进入文章详情页面后,再返回到首页时,首页会重新进行渲染,无法回到之前用户所在的区块链频道,而是直接变成首页渲染成功后默认显示的推荐频道。为了解决这个问题:我们可以在layout组件的渲染完成之后,给它加上缓存。
解决缓存带来的列表滚动位置问题:
就是列表滚动的位置没有缓存下来,也就是用户在首页的 区块链模块的文章列表滚动了一段距离后,进去文章详情页面,再返回到首页时,页面确实还在区块链模块,但是列表滚动的位置又回到了列表顶部。
layout切换到文章详情页面,触发activated生命钩子:
文章详情页面切换到layout,触发deactivated生命钩子:
-
-
Vue组件缓存导致两个实例间的属性值互相引用
2019-04-11 16:19:17使用Vue自定义组件时需要注意在那个生命周期中初始化组件 有这样一个业务需求: 页面中包含两个div, 两个div通过选择radio切换显示 div的显示通过v-if控制 每个div中都包含一个自定义select组件 两个select组件中的...使用Vue自定义组件时需要注意在那个生命周期中初始化组件
有这样一个业务需求:- 页面中包含两个div, 两个div通过选择radio切换显示
- div的显示通过v-if控制
- 每个div中都包含一个自定义select组件
- 两个select组件中的list不一样
页面完成够发现两个div中的select组件都可正常下拉\选择值, 但是当在div a中的select选择了值后, 比如选择value a, 再通过radio切换到div b, 发现div b中的select上显示div a中选择的值value a, 而value a不存在与div b中的select的data list中.
初步估计是select组件中显示的label从上一个vue实例中缓存了下来, 在mounted钩子中没能过滤掉这个这个值.
打印出来看看:
发现在mounted状态中组件中显示的label, 即截图中的selectShow为空, 因此不能被过滤掉. updated状态selectShow的值就出现了, 这时获得了selectShow值的引用我们就可以过滤掉上一个vue实例的selectShow的值了.
但是, updated状态我们的组件已经更新完成, 就是说组件已经完成显示了, 已经显示在我们的屏幕上了, 这时再去过滤值就会引起属性的更新, vue就会再走一遍生命周期的流程, 这是一个死循环, 在更新完成状态updated中开始新更新, 会导致浏览器卡死.那么, 我们应该在哪里进行数据过滤呢?
除了updated状态外, 还有一个生命周期能获得selectShow的引用, 并且不会导致死循环.
这就是beforeUpdate, 在beforeUpdate中我们可以放心的进行数据过滤, 例如直接将selectShow置空.
出现这种问题的原因编写组件时对vue的生命周期不够了解, 通常只在mounted中进行前置操作, 没有考虑到属性在vue实例的不同生命周期的不同状态. -
Vue 该如何实现组件缓存?
2021-11-07 16:17:48首先我们要知道为什么需要组件缓存? 在面向组件化开发中,我们会把整个项目拆分为很多业务组件,然后按照合 理的方式组织起来,那么自然会存在组件之前切换的问题,Vue 中有个动态组件 的概念,它能够帮助...首先我们要知道为什么需要组件缓存?
在面向组件化开发中,我们会把整个项目拆分为很多业务组件,然后按照合
理的方式组织起来,那么自然会存在组件之前切换的问题,Vue 中有个动态组件
的概念,它能够帮助开发者更好的实现组件之间的切换,但是在面对需求频繁的
变化,去要切换组件时,动态组件在切换的过程中,组件的实例都是重新创建的,
而我们需要保留组件的状态,为了解决这个问题,需要使用到 Vue 中内置组件 <keep-alive>
<keep-alive>的作用
包裹动态组件时,会缓存不活动的组件实例, 主要用于保留组件状态或避免重新渲染。
(应用场景)
比如有一个列表和一个详情,那么用户就会经常执行打开详情=>
返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可
以对列表组件使用<keep-alive></keep-alive>进行缓存,这样用户每次返回列
表的时候,都能从缓存中快速渲染,而不是重新渲染。
-
关于Vue实现组件信息的缓存问题
2020-12-10 01:03:45但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果。 那么我们给部分组件加上,实现方法如下: 在app.vue里 <!-- 这里是需要keepalive的 --> <router-view v-if="$route.meta. -
Vue中的组件缓存
2020-11-26 18:12:24Vue中的组件缓存 使用 keep-alive来对组件进行缓存,组件就不会被频繁创建销毁,间接提升了性能 在对组件使用keep-alive时,组件内部可以使用回调actived 和deactived钩子函数 来对当前路由表示是否活跃,当路由被激活时... -
vue 指定组件缓存实例详解
2020-08-27 18:36:51keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。这篇文章主要介绍了vue 指定组件缓存,需要的朋友可以参考下 -
说说 Vue 中组件的缓存
2019-04-19 20:38:50当时只是简单的提供了一个解决问题的思路,并没有说到多少组件缓存的东西,今天我们就来详细说说组件的缓存。 组件化开发模式下,我们会把整个项目拆分成很多组件,然后按照合理的方式组织起来。 自然就存在组件之间... -
vue 缓存部分组件!
2020-01-08 11:01:221.缓存部分组件 <keep-alive :include="['addpatient']"> <router-view /> </keep-alive> 有些场景需要回到某个页面不刷新,保持里面的内容,这时候就需要缓存页面,但是不能全部缓存的情况下,... -
vue 使某个组件不被 keep-alive 缓存的方法
2020-10-17 23:38:33今天小编就为大家分享一篇vue 使某个组件不被 keep-alive 缓存的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue 父子组件传值缓存解决方案
2021-12-29 10:07:24解决vue组件传值异步数据不同步 -
keep-alive vue组件缓存避免多次加载相应的组件
2019-05-10 16:56:00keep-alive vue组件缓存避免多次加载相应的组件 转载于:https://www.cnblogs.com/zhaoyun4122/p/10845401.html -
vue.js 动态组件缓存 keep-alive
2018-10-09 00:25:56文章目录动态组件如图代码问题keep-alive代码UI 框架的 Tabs 组件(iView)例子 动态组件 在不同组件之间进行动态切换 比如:选项卡,点击不同的tab显示相应的组件。 注意:页面上只有当前选择的组件,而不是把... -
vue组件缓存 keep-alive缓存列表
2018-02-07 11:04:38vue组件缓存 keep-alive缓存列表:vue页面数据缓存,从列表到详情,列表数据不需要缓存;从详情返回列表,详情不需要缓存,当然也可以缓存,假如访问的是同一条数据-另作处理。 -
解决vue-router 切换tab标签关闭时缓存问题
2021-01-19 12:34:35component: resolve => require(['@/pages/product/fundPros/fundTab/fundTab.vue'], resolve), title: '基金首页', redirect: 'fundProListG/fundProListG', meta: { keepAlive: false // 不需要被缓存 }, ... -
Vue设置组件缓存
2018-02-05 15:23:00Login.vue中: 1 export default { 2 name: "login", // 设置组件...App.vue中: 除了"login",其他组件都缓存 1 <keep-alive exclude="login"> 2 <router-view></router-view> 3 <... -
从keep-alive看vue内部如何实现组件缓存
2021-07-16 14:08:00都知道keep-alive是用于vue中组件缓存的,那内部如何实现缓存的呢,一起来看看吧 先放简单的文章导图: 1.keep-alive 在vue中起到什么作用 先来看看官网对keep-alive的一些功能说明: 组件之间切换的时候,你有时... -
Vue用keep-alive缓存组件
2022-04-14 21:19:48用途:对于动态切换的组件进行包裹,使其能够进行缓存,而不是销毁掉后重新创建 在系统开发中,界面上有时会需要对某一块内容进行切换,如果这一部分的内容是几个组件频繁动态切换,为了提高效率,可以使用keep-... -
vue中keep-alive内置组件缓存的实例代码
2021-01-19 14:46:06希望组件有缓存。 keep-alive 的使用方式: 将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍: 1. 切换组件时,当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时,也不会... -
vue里如何主动销毁keep-alive缓存的组件
2020-10-17 06:45:24主要介绍了vue里如何主动销毁keep-alive缓存的组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
Vue动态组件和组件缓存
2022-02-28 18:57:09一、切换组件案例 比如我们现在想要实现了一个功能: 点击一个tab-bar,切换不同的组件显示; 这个案例我们可以通过两种不同的实现思路来实现: 方式一:通过v-if来判断,显示不同的组件; 方式二:动态组件... -
vue的缓存页面组件(keep-alive的使用)
2020-04-24 15:12:09keep-alive组件能够对页面进行缓存操作,在一些开发场景上较为常用,include为需要缓存的组件name,exclude为不缓存的组件name,tips:缓存组件需指定name值,并且要和include的对应,否则缓存不成功 transition组件... -
vue中的缓存组件(keep-alive)
2021-02-28 00:21:23当我们进行频换切换,不需要重复渲染的时候,比如tab栏切换,就可以利用keep-alive缓存组件,不需要重复加载,也是提高vue性能的一个方式。 keep-alive是什么? keep-alive是一个抽象组件:它自身不会渲染一个DOM... -
Vue该如何实现组件缓存?与有关的生命周期有哪些?
2021-08-27 22:04:53晚上好。今天讲vue中的组件缓存。 -
keep-alive,vue组件缓存问题
2018-04-28 16:24:54是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也...