keepAlive动态缓存组件

最新推荐文章于 2024-07-08 18:52:36 发布

今天你写算法了吗

最新推荐文章于 2024-07-08 18:52:36 发布

阅读量115

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/MsWRight/article/details/135088731

版权

keepAlive的使用大家应该都清楚，如果我们在同一个router-view下展示的组件，有的想让他缓存，有的不想让他缓存应该怎么办呢？

缓存指定组件

我们可以使用include来指定缓存哪个组件在这里插入图片描述
include接收一个数组，是你想要缓存的组件的name，注意要和你组件的name是一致的

选择性缓存组件

如果你想要在一定情况下缓存，一定情况下不缓存，那么就可以根据自己的情况去动态改变这个数组，来达到动态缓存的效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

今天你写算法了吗

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【Vue3第二十二章】KeepAlive缓存组件

前端知识分享喵

02-27

6280

使用keep-alive的好处就是，在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

keep-alive（缓存）

weixin_62407339的博客

02-25

1565

keep-alive（缓存）

参与评论您还未登录，请先登录后发表或查看评论

【Vue】keep-alive 缓存组件

小秀的博客

08-10

3727

当在 Vue.js 中使用组件时，它将会缓存动态组件，而不是每次渲染都销毁和重新创建它们。这对于需要在组件间快速切换并且保持组件状态的情况非常有用。只能包含（或者说只能渲染）一个子组件，如果需要包含多个子组件，需要用选择某个确定的组件进行渲染。也可以使用或其他组件标签将它们包裹起来，再通过选择确定的某个组件进行渲染。因此标签里面有且只有一个子节点（或者说只能渲染一个子节点）。这些子组件可以通过动态组件或者其他方式进行切换。当一个被组件包裹的组件被切换出去时，它的状态将会被保留在内存中

keep-alive缓存组件

最新发布

m0_54007573的博客

07-08

635

keep-alive缓存组件

动态组件和keep-alive组件缓存：

weixin_48123820的博客

05-04

846

动态组件是指：在一个挂载点使用多个组件，并进行动态切换。可能对于新手来说，这句话有些难理解，什么是挂载点?可以简单的理解为页面的一个位置。最常见的就是：tab的切换功能。在vue要实现这个功能通常用两种方式。一是使用<component>元素的 is 的特性，二是使用 v-if。在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。

Vue-组件缓存-keep-alive

m0_72560900的博客

01-15

1310

在Vue.js中，组件的复用和缓存是一个重要的优化手段。当我们频繁切换组件时，频繁的销毁和重建会带来一定的性能开销。为了解决这个问题，Vue提供了一个名为keep-alive的抽象组件。下面我们将深入探讨keep-alive的工作原理、使用场景和最佳实践。keep-alive是什么keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

keep-alive组件缓存

前端程序猿的博客

02-22

6886

前言动态组件扩展关于is1.动态组件2.is的用法组件缓存扩展跟keep-alive有关的生命周期是哪些?activateddeactivated

vue keep-alive 动态删除组件缓存的例子

12-13

2、在进到子页面的时候，更新store的数组，把将要缓存组件的name(注意：是组件的name，并不是路由的name)，装进数组 3、当前组件的route-view,外层包裹keep-alive，include用你从仓库里面取出来的数组 4、关闭标签...

vue3 - 15.keepAlive缓存组件

qq_34111842的博客

10-22

2629

keep-alive 属性 - include : 声明想要被缓存的组件，比如我们有两个组件，我们只想缓存A组件，不想缓存B组件，那么我们可以用include声明，include支持字符串，数组，正则，比如：这个时候，当我们切换组件的时候，B组件是没有被缓存的。当使用keep-alive的时候，我在父组件切换其中一个子组件，其中一个子组件的onActivated默认会执行一次，当我们关闭其中一个子组件的时候，当前组件的onDeactivated会执行，说明已经被销毁，但是onMounted始终会执行一次。

vue组件缓存之keep-alive正确使用姿势

越是安静内敛的人，越容易生不惊人死不休

06-06

7212

em...新的问题又出现了,由于列表页被缓存了,这个时候我从首页,再点击进入某个列表，也不刷新了，完了，点击首页导航应该进入不同的列表页的. 也就是说，从首页进入列表组件不应该被缓存的。但是但是，我们的项目是用vue开发的webapp,多个组件共用一个窗口，当我们切换路由时，切出路由组件会销毁，所有列表页进入详情页列表页会销毁，重新回到列表页，列表页组件会重新加载。这样需求，如果是小程序的话，默认列表页就会缓存，因为小程序的运行环境是微信客户端，当我们打开一个页面会新建一个webview，

组件缓存 keep-alive

weixin_48341937的博客

07-24

254

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，② exclude ：组件名数组，任何匹配的组件都不会被缓存。① include ：组件名数组，只有匹配的组件会被缓存。的时候触发 → 进入这个页面的时候触发。的时候触发 → 离开这个页面的时候触发。deactivated 当组件。

组件缓存之keep-alive实现原理

m0_70858457的博客

03-10

853

是Vue内置的一个抽象组件，用于包裹需要被缓存的组件，并提供了一些特殊的属性和钩子函数来管理这些被缓存的组件实例。组件包裹需要被缓存的组件时，该组件的实例将被保存到缓存对象中，并在下一次渲染时直接使用缓存的实例，从而实现组件的缓存。上面的例子中，最多只会缓存5个实例，当缓存实例的数量超过5个时，最早缓存的实例会被销毁。属性来限制缓存实例的数量，当缓存实例的数量超过限制时，最早缓存的实例会被销毁。属性来控制哪些组件需要被缓存，哪些组件不需要被缓存。的组件，用于包裹需要被缓存的组件。属性保存原始组件的子节点。

keep-alive 是 Vue 的一个内置组件，用于缓存其他组件的实例，以避免重复渲染和销毁，它可以在需要频繁切换的组件之间提供性能优化

m0_71966801的博客

12-07

4237

再次切换到已缓存的组件：如果再次切换回已经缓存的组件，之前的组件实例将被重新激活，并重新显示在页面上。当组件被缓存起来时，这些状态都会被保留，再次渲染时可以直接使用，避免了重新初始化的开销。切换组件：如果切换到其他组件，之前缓存的组件实例将被保留在内存中。新的组件会被创建并渲染，但之前的组件实例不会被销毁。包裹需要缓存的组件，可以避免在组件切换时反复销毁和重新创建组件实例。组件，你可以包裹需要缓存的组件，然后这些组件在切换时将会被缓存起来，而不是每次都重新创建。组件时，包裹的组件会被创建并渲染。

vue列表页面缓存 keep-alive，列表跳转详情页面，列表页面缓存

高山景行，一尘不染

03-23

2008

A页面 B页面：列表页面 C页面：详情页面需求A页面跳转B页面时，B页面需要加载最新数据；C页面跳转B页面时，B页面的数据是A页面跳转到B页面的数据代码： router-view： <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <rout...

vue keep-alive 保留切换后的状态，上一个状态，之前状态，tab切换

爱睡的虫虫

04-06

1794

keep-alive Props： include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。用法：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在 ...

【vue进阶之旅】如何使用keep-alive做组件缓存？

梅花寺

09-21

719

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴，可以点击下方卡片领取，无偿分享) 我们会发现会多一个生命周期activated，这个生命周期代表组件被激活了。

keep-alive缓存组件（不销毁）

Nikki_u的博客

03-17

202

<keep-alive include="UserName" exclude="UserInfo"> <component :is="comName"></component> </keep-alive> 与keep-alive配合使用的两个钩子函数当使用keep-alive时切换页面后使用created钩子函数在本地储存的值不能动态渲染到页面这时需要配合activated和deactivated使用生命周期activated--激活时-显示.

vue3 keepalive动态缓存

03-31

Vue3 的 `keep-alive` 组件提供了动态缓存的功能，可以根据组件的属性值动态地缓存组件。在 Vue2 中，我们可以使用 `include` 和 `exclude` 属性来控制缓存哪些组件和不缓存哪些组件。但是这种方式无法根据组件的属性值进行动态缓存。在 Vue3 中，我们可以使用 `v-bind` 指令来动态绑定 `keep-alive` 组件的 `include` 和 `exclude` 属性，实现动态缓存的功能。例如： ```html <template> <div> <button @click="toggle">Toggle</button> <keep-alive :include="includeList" :exclude="excludeList"> <router-view /> </keep-alive> </div> </template> <script> export default { data() { return { includeList: [], excludeList: [], show: false, }; }, methods: { toggle() { this.show = !this.show; if (this.show) { this.includeList.push("ComponentA"); this.excludeList = this.excludeList.filter((name) => name !== "ComponentA"); } else { this.excludeList.push("ComponentA"); this.includeList = this.includeList.filter((name) => name !== "ComponentA"); } }, }, }; </script> ``` 在上面的代码中，我们使用 `includeList` 和 `excludeList` 数组来动态控制缓存哪些组件和不缓存哪些组件。在 `toggle` 方法中，根据 `show` 属性的值来决定是否缓存 `ComponentA` 组件。如果 `show` 为 `true`，则将 `ComponentA` 添加到 `includeList` 中，并从 `excludeList` 中删除；如果 `show` 为 `false`，则将 `ComponentA` 添加到 `excludeList` 中，并从 `includeList` 中删除。这样就可以根据组件的属性值动态地缓存组件了。