vue2.0中keepAlive的使用

最新推荐文章于 2024-07-11 15:08:06 发布
最新推荐文章于 2024-07-11 15:08:06 发布
阅读量313 收藏
点赞数
分类专栏： vue小知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38687522/article/details/118225475
版权

在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态。
在这里插入图片描述
设置meta 的属性keepAlive 为true
在这里插入图片描述
返回后保持当前停留位置
在这里插入图片描述

智慧2021
关注
专栏目录
vue2源码分析-keep-alive组件
小陈的博客
01-17 572
keep-alive是Vue.js的一个内置组件。它能够将指定的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。具体用法咱们这里就不再细说了，今天主要是探讨它的源码。本文vue版本为2.6.14keep-alive组件的缓存是基于VNode节点的而不是直接存储DOM结构。它将满足条件的组件在cache对象中缓存起来，在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。并且使用到了LRU算法(最近最少使用)
Vue2.0混入mixin的简单用法-全局的用法
cider_m的博客
02-17 1237
参数： {Object} mixin 全局用法： 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。 注：不推荐在应用代码中使用。 <div id="app"></div> <!-- data 和methods 的数据以组件里面的为主 在哪里要用，就在哪里混入 mixins：[] --> <script src="....
vue2.0 keep-alive最佳实践
weixin_34399060的博客
01-14 218
1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 <keep-alive> <component> <!-- 组件将被缓存 --> </component> </keep-alive> 有时候 可能需要缓存整个站点...
vue2 使用keepalive 缓存页面失效，jeecg踩坑日记
最新发布
aaaarrrrrr的博客
07-11 1154
二级菜单开启菜单缓存后页面正常缓存，但是三级菜单开启缓存后，缓存时而有效时而无效.
【vue2】keep-alive
阿程的博客
06-16 1724
keep-alive
vue2 中使用keep-alive
sdaulee的博客
01-12 3677
vue2项目中使用keep-alive,可在路由跳回该组件时展示跳走前的数据形式，滚动条等。 步骤1：在route.js中使用keepAlive属性，并且定义一个scrollTop存储滚动条位置 { path: "/check/list", name: "CheckList", component: CheckList, meta: { title: "审核列表", keepAlive: true, scrollTop: 0
【Vue2.0源码学习】内置组件篇-keep-alive
一个前端开发者
06-24 1813
keep-alive是Vue实现的一个内置组件，也就是说Vue源码不仅实现了一套组件化的机制，也实现了一些内置组件，关于是Vue中内置的一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件链中。当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。这句话的意思简单来说：就是我们可以把一些不常变动的组件或者需要缓存的组件用包裹起来，这样就会帮我们把组件保存在内存中，而不是直接的销毁，这样做可以保留组件的状态或避免多次重新渲染，以提高页面性能。
Vue2.0 实现页面缓存和不缓存的方式
10-16
在Vue2.0中，页面缓存和不缓存的管理是通过`<keep-alive>`组件和路由元信息(`meta`)来实现的。`<keep-alive>`是Vue提供的一个内置组件，它能将组件状态保留在内存中，使得组件在切换后仍然保持之前的实例状态，从而...
基于vue2.0构建的在线电影网【film】，webpack+vue+vuex+keepAlive+muse-ui+.zip
02-15
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发...有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
Vue2.0——组件动态加载 ＜keep-alive＞
ling_xy的博客
08-10 560
文章目录一、动态切换组件1.使用组件标签 component 的 is 属性来动态切换组件2.使用keep-alive 缓存之前的状态 一、动态切换组件 1.使用组件标签 component 的 is 属性来动态切换组件 <component :is=""></component> Keep.vue:在它里面挂载两个页面组件keepOne，keepTwo <template> <div id="keep"> <div class="keep-li
vue2中的keep-alive使用总结及注意事项
11-30
keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。结合vue-router中使用，可以缓存某个view的整个内容。 基本使用如下： <!-- 该组件将被缓存！ --> 一般有这样的需求，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页 有两个情况： 1. 直接点击浏览器的后退返回按钮。 2. 点击导航栏中的 /list的链接返回。 那么针对第一种情况下，我们直接通过后退按钮
深入理解vue-router之keep-alive
12-09
本文基于 Vue2.0 keep-alive 简介 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 用法也很简单： <keep> <component> <!-- 该组件将被缓存！ --> </component> </keep> props include – 字符串或正则表达，只有匹配的组件会被缓存 exclude – 字符串或正则表达式，任何匹配的组件都不会被缓存 // 组件 a export default { name: 'a', data () { return {} } }
vue2.0 keep-alive组件总结
weixin_44242600的博客
02-22 200
** &lt; keep-alive&gt; ** 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。用来缓存组件,避免多次加载相应的组件,减少性能消耗 &lt; keep-alive &gt;包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 &lt; transition &gt; 相似，&lt; keep-alive &gt; 是一个抽象组件：它自身不会渲...
vue2.0 keep-alive组件用法
CloudEmperor
05-22 439
在做vue移动端项目的时候，有些课程列表内容特别多，通过做上拉加载就可以分批加载，但是如果用户操作到四五页左右点进去看课程详情，返回会回到第一页数据。这样再次上拉加载找课程就比较麻烦。所有我们可以利用vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗。定位用户当前操作的位置及数据。一.根据实际需求，将keep-alive组件开关定到相应页面，通常都是在...
Vue2.0源码解析 - 知其然知其所以然之keep-alive
lixiaosenlin的专栏
10-13 1747
前言 【一天一个小知识，每天进步一点点】小伙伴们大家好，今天将要给大家分享是Vue中关于组件缓存的一个内置组件 - keep-alive 不知道小伙伴们有没有遇到这样一种情况，在我们的项目开发中，有时候会利用弹出框做一些表单提交的操作，但有时候填着填着鼠标不小心点了一下弹出框以外空白的地方，导致弹出框关闭了，当再次重新打开弹出框的时候，发现之前录的信息全都不见了，是不是瞬间就不淡定了呢。这个时候我们的内置组件keep-alive就会派上用场了。接下来我们就一起分析下keep-alive是干什么用的，它的实
vue2的keep-alive的总结
weixin_34072637的博客
12-20 258
vue2的keep-alive的总结 keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。结合vue-router中使用，可以缓存某个view的整个内容。基本使用如下： &lt;keep-alive&gt; &lt;component&gt; &lt;!-- 该组件将被缓存！ --&gt; &lt;/component&...
Vue2 - keep-alive 作用和原理
qq_40147756的博客
01-24 2423
Vue2 - keep-alive 作用和原理
vue2 缓存组件＜keep-alive＞
weixin_46504400的博客
05-21 675
此外，这些生命周期钩子函数不会在组件首次挂载时触发，因为它们只对被缓存的组件有效。是一个内置组件，它允许您缓存不活动的组件实例，以便在需要时可以更快地重新渲染它们。当一个组件被包裹在标签中时，它的状态会被保留，而不是在每次切换时都重新创建。这意味着，如果您的组件有子组件，这些子组件也会随着父组件一起被缓存。组件提供了一些生命周期钩子函数，这些钩子函数可以在组件被缓存或激活时触发。这通常发生在组件被移除出DOM树时，或者当组件被手动销毁时。这通常发生在组件不再需要显示时，例如当它被另一个组件替换时。
vue2.0中使用ant-design-vue
08-16
在Vue 2.0中使用Ant Design Vue，你需要按照以下步骤进行设置： 1. 首先，安装Ant Design Vue的依赖包。你可以使用npm或者yarn进行安装。打开终端，运行以下命令： ``` npm install ant-design-vue --save ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值