keep-alive使用场景

最新推荐文章于 2024-02-04 19:30:00 发布
VIP文章 最新推荐文章于 2024-02-04 19:30:00 发布
阅读量3.5k 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a895544608/article/details/123847726
版权

        keep-alive是vue提供的一个内置组件，页面切换的时候会进行销毁，当我们不想它被销毁的话就需要用keep-alive包裹着组件

        

或者

 如上所示！三个组件里面定义的数值都会被缓存

如果某些组件需要缓存、某些不需要的话 如下所示

一、

最低0.47元/天 解锁文章
一碗云吞面
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue列表页面缓存 keep-alive，列表跳转详情页面，列表页面缓存
高山景行，一尘不染
03-23 1791
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...
keep-alive保持组件状态的方法
01-18
为什么keep-alive可以直接使用 开发者无需注册和引入，直接可以在模板中使用。 跟开发者使用Vue.component自定义的组件不同，keep-alive无需注册，在模板中直接可以使用，如下所示： <keep> <component is=view></...
vue keep-alive应用场景及如何使用
u014678583的博客
07-16 6795
一、应用场景： 在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的原来数据以及滚动位置，这个时候就需要保存状态，要缓存状态。概括来讲： 1、列表页面 ——进入详情页 —— 后退到列表页（缓存列表页的原来数据以及滚动位置） 2、重新进入列表页面，获取最新的数据 二、如何使用 在vue2.1.0版本之后的使用方法 1、创建router实例的时候加上scrollBehavior方法 //在router中的index.js const router = new VueRout.
对 keep-alive 的理解，使用场景以及存在的问题
小草莓的博客
07-06 3744
include(包含的组件缓存) 、 exclude(排除的组件不缓存，优先级大于include) 、max(最大缓存数，内部采用lru算法用于维护缓存列表)若用 keep-alive 包住A组件和B组件，从A组件跳转到B组件，在哪里更新B组件页面的数据？② exclude - 字符串或正则表达式，任何名称name匹配的组件都不会被缓存。，缓存的组件重新进入不会再触发created生命周期中的方法，因此数据不会更新。③ max - 缓存的最大个数（如果超过最大缓存个数，则移除最先缓存的组件）
keep-alive相关用法及使用场景
Dax1_的博客
12-15 2306
keep-alive 用法 keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 用法 <keep-alive> <component> <!-- 该组件将被缓存！ --> </component> </keep-alive> 使用场景 例如在A组件内多个输入框中输入信息，此时需要跳转进入B组件进行操作，再返回A组件。若没有使用 keep-alive，则A组件内输入框中的信息都会被清空，因为A组件被
keep-alive的深入理解和使用
老电影故事的博客
11-23 1413
一、什么是keep-alive? 有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。 官网解释： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，a
彻底揭秘keep-alive原理(小结)
11-30
一、前言 ...本文介绍的内容包括： keep-alive用法：动态组件&vue-router keep-alive源码解析 keep-alive组件及其...使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 2.2 一个场景 用户在某
all-keep-alive:一个后台管理的tabs页面例子，打开的tabs页会有缓存，关闭之后清除缓存。包含同一个组件的多次复用的tabs
05-29
可以在实现一些多标签页面，打开标签需要缓存页面数据的场景下使用 install npm install all-keep-alive 使用 import { allKeepAlive } from 'all-keep-alive' export default { components: { allKeepAlive } } ...
vue的keep-alive中使用EventBus的方法
12-10
最近项目中由于列表居多且都做了下拉刷新上拉加载，所以就使用了keep-alive组件来缓存页面数据，但是当在其他页面做一些操作改变了列表数据，当来到列表的时候每次都要下拉刷新一下，体验不好，所以就使用到了...
浅谈Vue页面级缓存解决方案feb-alive(上)
12-11
使用理由 开发者无需因为动态路由或者普通路由的差异而将数据初始化逻辑写在不同的钩子里beforeRouteUpdate或者activated 开发者无需手动缓存页面状态，例如通过localStorage或者sessionStorage缓存当前页面的数据...
vue2中的keep-alive使用总结及注意事项
11-30
keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。结合vue-router中使用，可以缓存某个view的整个内容。 基本使用如下： <keep> <component> <!-- 该组件将被缓存！ --> </component> </keep> 一般有这样的需求，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页 有两个情况： 1. 直接点击浏览器的后退返回按钮。 2. 点击导航栏中的 /list的链接返回。 那么针对第一种情况下，我们直接通过后退按钮
vue keep-alive及场景应用
lemon今天学习了吗？的博客
03-09 1448
定义：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 只有用<keep-alive></keep-alive>包裹的组件才会有activated生命周期 应用场景：1.tabs切换时保留切换前的操作； 2.前进刷新、后退缓存用户浏览数据和浏览位置； ...
HTTP keep-alive的适用性
u013484516的专栏
01-15 615
keep-alive可以让TCP连接被复用，避免不必要的断开与重新连接。从这个设定上看它绝对是个好东西，但并不是所有连接都适合用keep-alive。在不适合keep-alive的场景使用keep-alive反而会带来负面影响。它实际上就是一种以内存换取网络的策略。 　　当一个页面打开时，页面需要请求js、css以及页面上的图片等。网络请求是需要时间的，这些请求不会瞬间完成，但他们却是瞬间发起的
keep-alive 的作用及使用场景
Z_h123的博客
08-31 2060
1.keep-alive作用的简介: 在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了. 2.vue在每次组件切换的时候上一个组件都会被销毁,如果你需要访问上一个组件就得重新渲染 keep-alive:主要用于保存组件状态 或避免重新渲染 应用场景:点击商品列表进入详情页面 点击返回按钮 回
keep-alive的使用场景
qq_41429765的博客
12-24 182
<div id="app"> <!-- 为了避免频繁的创建，消耗较大的常用组件，缓存时正解，ABC组件的频繁创建 --> <!-- 根目录如果时router-view可用router-view --> <keep-alive :include="cached" :exclude="noCached"> <aa v-if="current==='A'"></aa> ..
vue中的keep-alive详解与应用场景
唯见青山不见君
11-28 2086
vue中的keep-alive详解与应用场景
Vue中keep-alive的作用、原理及应用场景
最新发布
有我更精彩的博客
02-04 1446
在进行Vue开发的过程中，我们经常会遇到需要进行组件缓存的场景，这时候Vue提供的keep-alive组件就派上了用场
keep-alive的作用及原理
一个有节操的码农
10-18 1784
render所实现的大致功能是：首先获取keep-alive中包含组件的名称，然后和keep-alive定义的是否需要缓存的组件规则去配置；如果不需要缓存，则直接返回这个组件的vnode节点，否则的话则进行缓存，当下一次进入时候，再直接从缓存里取出来。
吐血整理 ＜ keep-alive ＞ 知识，包括使用方法，缓存机制，史上最全
m0_61603704的博客
03-02 2279
keep-alive 知识总结，包括使用方法，缓存机制

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值