vue框架 keepAlive用法

最新推荐文章于 2024-06-20 13:48:40 发布
最新推荐文章于 2024-06-20 13:48:40 发布
阅读量473 收藏
点赞数 1
分类专栏： vue javascript web缓存 文章标签： vue.js 缓存 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxdzi/article/details/123042968
版权
javascript 同时被 3 个专栏收录
91 篇文章 0 订阅
订阅专栏
vue
87 篇文章 1 订阅
订阅专栏
web缓存
46 篇文章 0 订阅
订阅专栏

场景 需要缓存处理 且不销毁组件 处于失活状态

	component 动态组件意思  可以通过 is属性 来动态切换组件  
	用到tab选项卡
	比例 4个选项  点击显示那个组件
	缺点： 在切换那个组件数据丢失  因为不缓存 组件销毁了

因此需要keep-alive去缓存页面
用法 英文逗号隔开 include表示缓存那些组件 相反 exclude表示不缓存那些组件 也有数组写法 看个人

	有2个钩子函数
	激活状态 active  
	当页面第一次进去的时候  会先执行created钩子之后在执行 active钩子
	如果切换了在切换过来  只会执行 active钩子 表示被创建了
	deactive 表示改组价被缓存了
A 风
关注
专栏目录
Vue-Router路由动态缓存组件(keep-alive)，vue2/vue3不同写法
共同学习，共同成长
06-24 2028
大家好，我是码喽的自我修养！今天给大家分享【Vue-Router路由动态缓存组件(keep-alive)，vue2/vue3不同写法】，超详细讲解！
vue 中的 keep-alive
weixin_39111384的博客
12-28 5343
一、什么是 Keep-alive keep-alive 是 vue 中的内置组件，能够在组件切换过程中将状态保留在内存中，防止重复的渲染 DOM； keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们； keep-alive 可以设置一下 props 属性： include - 字符串或者是正则表达式。只有名称匹配的组件才能被缓存 exclude - 字符串或者是正则表达式。 max - 数字。最多可以缓存多少组件实例。 关于 keep-alive 的基本用法 <keep-
vue中keep-alive的使用及详解
热门推荐
关注最新技术问题并持续维护更新
05-19 12万+
概念     keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用     在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 原理     在 created 函数...
vue3.0(十四)内置组件KeepAlive
最新发布
chengcheng9876的博客
06-20 2463
vue3.0(十四)内置组件KeepAlive
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 3312
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们keep-alive可以设置以下propsinclude- 字符串或正则表达式。只有名称匹配的组件会被缓存exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存max- 数字。最多可以缓存多少组件实例关于keep-alive使用includes和exclude匹配首先检查组件自身的name选项，如果name。
vue使用keep-alive缓存页面优化项目
田兴的博客
03-01 6295
keep-alive是什么？ <keep-alive> 标签：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，取消组件的销毁函数，防止重复渲染DOM。 当用它包裹 <router-view> 时，会缓存不活动的组件实例，而不是销毁它们。 和 <transition> 相似，它自身不会渲染一个 DOM 元素。 使用 <keep-alive>...
Vue中keepAlive使用
Joy_lazyCat的博客
02-10 1974
// 被keepalive包含的组件会被进行缓存不会被再次init，也就意味着不会重走生命周期函数, 但是平常工作中很多业务场景是希望我们缓存的组件在再次渲染的能做一些事情,vue为keepalive提供了两个额外的hook activated 当keepalive包含的组件再次渲染的时候触发deactivated 当keepalive包含的组件销毁的时候触发 业务场景： 1. 从list页面到detail页面，从detail页面返回list，缓存list页面 2....
Vue keep-alive的使用
gavincz的博客
11-09 314
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 结合router，缓存部分...
Vue3 Keepalive 概述与基本用法
# 1. 介绍 在本章节中，我们将介绍Vue3 ...接下来我们将介绍 Vue3 Keepalive 的基本用法，包括如何启用 Keepalive、其属性和方法介绍，以及一个使用 Keepalive 缓存组件的示例。 ### 2.1 在Vue3中启用Keepalive 在
vue里如何主动销毁keep-alive缓存的组件
10-17
在Vue.js框架中，`keep-alive`是用于缓存组件状态的一个功能，它可以保持组件状态，避免重新渲染，提高应用性能。然而，在某些场景下，我们需要在组件不再可见时主动销毁它，以避免内存泄漏或资源浪费。本文将详细...
vue jsx 使用指南及vue.js 使用jsx语法的方法
11-27
Vue.js 是一款流行的前端框架，而 JSX 是一种用于在 JavaScript 中书写类似 HTML 的语法，它在 React 生态系统中广泛使用。Vue.js 也支持 JSX，但与 React 的 JSX 有一些差异。以下是一些关于 Vue.js 中使用 JSX 的...
vue使用keep-alive保持滚动条位置的实现方法
10-17
在开发使用Vue框架的应用时，我们常常需要在用户在页面间切换时保持滚动条的位置，以改善用户体验。然而，当我们使用Vue内置的组件来缓存组件状态时，会发现滚动条位置并没有被自动保存。为了解决这个问题，我们需要...
vue中如何使用keep-alive
weixin_45645412的博客
01-18 572
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
柏灿的博客
05-09 4120
vue 在路由切换时，我们有时候不希望重新渲染界面，这时候就需要使用keep-alive，来将组件缓存 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗template> div class="app"> keep-alive> router-view>router-view> keep-alive> div>
Vue之keep-alive
seimeii的博客
05-18 3113
Vue之keep-alive
keep-alive
m0_62198921的博客
02-15 321
概念 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中 原理 在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性消耗，提高用户体验性 对生命周期函数变化 被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子：activatrd 与 deactivated activated 在keep-ali
vue中keepAlive的使用
Shi_Jiu_的博客
07-19 437
vue中keepAlive的使用 在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了. keep-alive 简介 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 用法也很简单： <keep-alive> <component>
Vue之keep-alive详解
前端开发工程师
10-24 4409
``是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
qiankun vue3 keepalive使用方法
06-03
好的，关于 Qiankun 和 Vue3 中的 KeepAlive 的使用方法，我可以给您一些简单的介绍： 1. 在主应用中配置KeepAlive组件 在主应用中的 `app.vue` 文件中，需要配置一个 KeepAlive 组件，用于缓存子应用中的组件状态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值