vue中keep-alive的使用和详解。vue中keep-alive的原理和核心概念。

最新推荐文章于 2023-07-06 16:30:31 发布
最新推荐文章于 2023-07-06 16:30:31 发布
阅读量854 收藏 1
点赞数 3
分类专栏： javascript keep-alive vuex 文章标签： wpf linq webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IAmNotChangAn/article/details/122210972
版权
本文详细介绍了 Vue 中 `keep-alive` 的使用，包括如何缓存动态组件和页面，以及如何通过元信息、黑名单和白名单实现选择性缓存。在动态组件和页面切换中，`keep-alive` 能有效保持数据状态，避免数据丢失。
摘要由CSDN通过智能技术生成

keep-alive是一个抽象组件:它自身不会渲染一个DOM元素，也不会出现在父组件链接；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它。

有时候我们在第一个页面缓存的数据，点击第二个页面时第一个页面的数据就会清除，这时我们就需要使用keep-alive来帮助我们缓存数据。

目录:

一、keep-alive包裹组件

二、keep-alive包裹页面

三、keep-alive选择性包裹页面

一、keep-alive包裹动态组件。

①新建两个子组件

②用keep-alive标签包裹 <compontnts is=""></compontnts>

当我们点击kep1页面的按钮。然后点击kep2页面并返回ke1页面，数据会清空，这是我们不想看到的场景。

 此时我们使用<keep-alive>标签包裹动态组件就可以解决这个问题。

 二、keep-alive包裹页面

最低0.47元/天 解锁文章
我不是长安
关注
专栏目录
vue # keep-alive
skysys的研究小屋
08-10 161
问题描述 用Vue.js做移动端开发的时候，经常会遇到这样的应用场景： 首先，让用户看到新闻列表；然后点击新闻标题，切换到新闻详情的组件，以展示新闻详情。 很多应用场景都于此类似，比如先进入商品列表，点击某一个商品条目，则切换到商品详情的组件。 这种场景往往会碰到一个问题，当我每一次从详情组件退回到列表组件的时候，列表组件会重新发出ajax请求。考虑到下面2条原因，总觉得这么不好。 1.列表组件上的数据不会在短短几分钟之内就更新，完全没必要每次都发出ajax请求。这样势必降低用户体验 2.浪费移动设备的流量
keep-alive 用法以及作用
sshaohui的博客
09-17 1528
概念 keep-alive是vue的内置组件，可以包裹动态路由和组件,会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用 防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。 属性 include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。 生命周
vue keep-alive组件的使用以及原理
weixin_38069018的博客
11-22 276
vue keep-alive组件的使用以及原理。 keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。 它有两个生命周期： activated: keep-alive组件激活时调用 deactivated: keep-alive组件停用时调用 它提供了include与exclude两个属性，允许组件有条件地进行缓存。 有2个属性 include = “a” 将缓存组件名为a得组件 ex
vue keepalive的使用与原理
weixin_42254016的博客
03-09 370
vue keepalive的使用 场景：A->B不需要缓存，C->B需要缓存 网上很多解决方案，大致思路是在路由里面添加keepAlive状态值，app.vue里面根据这个状态值判断是否需要添加keepAlive组件；在离开A页面进入B页面的时候，将这个状态值置为false,在离开C回到B页面时将状态值置为true //在router里面添加mata { path: '/b', name: 'B', component: B, meta:{
vue中keep-alive的使用及详解
热门推荐
关注最新技术问题并持续维护更新
05-19 12万+
概念     keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用     在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 原理     在 created 函数...
vue使用keep-alive缓存页面优化项目
田兴的博客
03-01 6326
keep-alive是什么？ <keep-alive> 标签：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，取消组件的销毁函数，防止重复渲染DOM。 当用它包裹 <router-view> 时，会缓存不活动的组件实例，而不是销毁它们。 和 <transition> 相似，它自身不会渲染一个 DOM 元素。 使用 <keep-alive>...
解析Vue动态组件——keep-alive
小王的技术库
11-08 2331
keep-alive组件的作用类似于 HTTP 中的持久链接。它可以避免组件实例不断地被销毁和重建。keep-alive的实现并不复杂。当被keep-alive的组件在卸载的时候，渲染器并不会真的将其卸载，而是会将该组件搬运到一个隐藏的容器中，从而使得组件可以维持当前状态。当被keep-alive的组件再次被 “挂载” 时，渲染器也不会真的挂载它，而是将它从隐藏容器中搬运到原容器。
详解vue-template-admin三级路由无法缓存的解决方案
10-15
这个问题的核心在于Vue的`<keep-alive>`组件，它用于缓存组件实例，以提高性能并减少不必要的重新渲染。然而，当涉及到多级路由时，缓存机制可能会出现失效的情况。 首先，我们要理解为什么三级路由的缓存会失效。...
07-vue-router详解.pdf
09-18
要使用Vue-router，首先需要通过npm来安装，然后在模块化工程中使用Vue.use()方法进行路由功能的安装和配置。安装Vue-router后，开发者可以创建路由实例，并在实例中定义路由规则，包括路径、组件以及嵌套路由、路由...
详解vue-router数据加载与缓存使用总结
12-11
Vue Router 是 Vue.js 应用中的官方路由库，它允许我们定义和管理应用程序中的路由，实现页面间的平滑切换。在构建单页面应用时，数据加载与缓存是两个非常重要的概念，尤其在多层级路由之间共享数据时，正确处理...
Vue之keep-alive
seimeii的博客
05-18 3128
Vue之keep-alive
Vue中 keep-alive 详解
明天也要努力的博客
01-13 6万+
1. 简介 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用： 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。 原理： 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode
Vue中的Keep-alive
最新发布
D-的博客
07-06 3362
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们keep-alive可以设置以下propsinclude- 字符串或正则表达式。只有名称匹配的组件会被缓存exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存max- 数字。最多可以缓存多少组件实例关于keep-alive使用includes和exclude匹配首先检查组件自身的name选项，如果name。
Vue中 key keep-alive
w1366352655的博客
12-18 257
Vue中 key keep-alive keep-alive key &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;script t...
vue中如何使用keep-alive
weixin_45645412的博客
01-18 576
vue中如何使用keep-alive 1.keep-alive的概念 1.1： keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 2.keep-alive的作用 2.1：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 3.keep-alive的原理 3.1：在 created
vue keep-alive 在哪里使用及原理
m0_65730686的博客
07-25 265
vue keep-alive 在哪里使用及原理
vue中的keep-alive
xm2by的博客
05-15 984
vue中的keep-alive keep-alive的作用主要是在组件切换时，保存组件的状态，防止重复渲染引发性能问题。比如：常见的列表页与详情页，当我们在列表页通过滚动鼠标寻找到自己感兴趣的标题时，点进去进入详情页，当浏览完详情页后返回到列表页，此时我们希望返回的列表页不是重新渲染后的列表页，而是我们之前滚动到的位置，keep-alive 就可以帮助我们缓存列表页的状态，实现上述效果。k...
vue 中的 keep-alive
weixin_39111384的博客
12-28 5377
一、什么是 Keep-alive keep-alive 是 vue 中的内置组件，能够在组件切换过程中将状态保留在内存中，防止重复的渲染 DOM； keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们； keep-alive 可以设置一下 props 属性： include - 字符串或者是正则表达式。只有名称匹配的组件才能被缓存 exclude - 字符串或者是正则表达式。 max - 数字。最多可以缓存多少组件实例。 关于 keep-alive 的基本用法 <keep-
Vue.js使用详解：组件、keep-alive与CSS隔离
"这篇超全面的Vue.js使用总结涵盖了Vue.js的核心特性，包括组件系统、指令使用、组件样式隔离以及循环插入图片等实践技巧。Vue.js作为一款流行的JavaScript框架，以其简洁易用的API和数据驱动的理念，为开发者带来了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值