keep-alive

Falsify_

已于 2022-10-26 23:05:11 修改

阅读量103

点赞数

文章标签： javascript vue.js 缓存

于 2022-08-03 18:41:51 首次发布

本文链接：https://blog.csdn.net/Falsify_/article/details/126146715

版权

keep-alive 是一个内置组件
正常我们切换 vue 页面页面会被销毁
如果加上 keep-alive 页面不会被销毁会被缓存下来
一般是加在坑 router-view 的外面

用 keep-alive 可以缓存滚动条的距离，在路由离开之前 beforeRouteLeave 里面记录当前页面的 scrollTop
在 activated 中把刚才记录的滚动条的位置赋值给当前页面的滚动条
还能记录填入的表单的内容

可以使用
include 规定缓存谁
exclude 规定不缓存谁
可以直接使用组件的 name 值也可以使用正则表达式来规定缓存规则
meta 信息
这三种方式来规定缓存谁不缓存谁

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Falsify_

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

vue keep-alive请求数据的方法示例

08-27

Vue Keep-Alive 请求数据的方法示例 Vue Keep-Alive 是 Vue 框架中的一个功能强大且实用的机制，可以缓存组件的状态，减少不必要的组件重渲染，提高应用程序的性能。但是，在使用 Keep-Alive 时，可能会遇到一些...

vue中keep-alive组件的入门使用教程

12-10

Vue.js中的`<keep-alive>`组件是一种非常实用的功能，用于在组件切换过程中保持组件的状态，避免每次切换都重新创建和销毁组件实例。这在处理需要维持数据或状态的复杂应用时尤其有用，例如音乐播放应用中保持播放...

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

缓存滚动位置：解决keep-alive组件缓存滚动位置失败问题

技术圈

07-19

2884

但是使用keep-alive缓存页面后，发现虽然页面缓存成功了，但是列表的滚动条又自动回到了最上方。怎样缓存滚动位置？这篇文章教会你。

vue 缓存页面滑动的距离

@Grapefruit的博客

05-10

1829

多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) vue的页面缓存，都知道是用keep-alive来进行缓存的。但是keep-alive却只能缓存页面和页面的数据，却不能缓存页面滑动之后和顶部的距离，从b页面回到a页面之后又是从最顶部开始的，如果页面较短还可以，但是如果页面很长的话，给用户的体验效果就会很差。这个时候...

vue keep-alive 返回保存滚动条位置

pixle的博客

11-13

1002

export default{ data(){ return{ scrollY:0 } }, //页面离开前保存滚动条距离.page为滚动元素 beforeRouteLeave(to, from, next) { //保存滚动条元素scrollTop值 this.scrollY = document.querySelector(".page").scrollTop; next(); }, //进入页面恢复滚动条位置 activated() { d

vue中keep-alive缓存滚动条

weixin_44696379的博客

07-03

5091

前言这几天公司在做一个app，需要嵌套H5页面，于是H5页面的编写就落到了本人的手里，啥都不说just do it 别逼逼！项目过程中因为做的页面是列表页和详情页，为了接近原生和用户体验好，所以在列表和详情路由切换时候就要缓存列表页数据（路由跳转就是列表➡详情返回到➡列表），使用户体验更好怎么实现 keep-alive 第一步，在路由元信息里配置需要缓存的页面，我用的keepAlive表示...

vue中keep-alive的使用及详解

热门推荐

关注最新技术问题并持续维护更新

05-19

12万+

概念 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性原理在 created 函数...

【手撕源码】vue2.x中keep-alive源码解析

编码世界

02-13

6万+

vue中内置组件keep-alive的设计思想源于HTTP中的Keep-Alive模式，Keep-Alive模式避免频繁创建、销毁链接，允许多个请求和响应使用同一个HTTP链接。

Keep-Alive实现原理

温暖前端的博客

08-21

1089

这是通过维护一个 keys 数组来实现的，最近使用的组件的 key 会被移到数组末尾。Keep-Alive 组件内部维护了一个 cache 对象，用于存储它的子组件实例。Keep-Alive 是 Vue 的一个抽象组件，它不会渲染出实际的 DOM 元素，而是将其包裹的动态组件进行缓存。当组件在 Keep-Alive 内被切换时，它的状态会被保留，避免重新渲染。Vue 中的 Keep-Alive 是一个非常有用的内置组件，用于缓存组件实例，以提高性能和用户体验。

Vue中 keep-alive 详解

明天也要努力的博客

01-13

6万+

1. 简介 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。原理：在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染）时，如果 VNode

011-keep-alive详解

loveEveryWeb的博客

03-10

1078

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。原理：在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中，在 render（页面渲染）时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。用于保留组件状态或避免重新渲染，包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

HTTP协议头部与Keep-Alive

happy_king_zi的博客

08-27

1030

1 Accept：告诉WEB服务器自己接受什么介质类型，/ 表示任何类型，type/* 表示该类型下的所有子类型，type/sub-type。2 Accept-Charset：浏览器申明自己接收的字符集 Accept-Encoding：浏览器申明自己接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate） Accept-Language：浏览器申明自己接收的语言语言跟字符集的区别：中文是语言，中文有多种字符集，比如big5，gb2312，gbk等等。

keep-alive的介绍及使用

01-08

如果需要频繁切换路由，这个时候就可以考虑用keep-alive了，来达到避免数据的重复请求的目的 keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗。简单一点来说就是从页面A链接到其他页面后回退到页面A...

解决vue keep-alive 数据更新的问题

12-01

在Vue.js应用中，`<keep-alive>`组件是一个非常有用的特性，它允许我们缓存组件的状态，使得在切换路由时能快速恢复之前的状态，从而提高用户体验。然而，在实际使用中，`<keep-alive>`可能会引发一些数据更新的问题...

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

10-16

根据提供的文件信息，以下是关于Vue中keep-alive组件缓存动态删除的知识点详细说明：首先，什么是Vue中的keep-alive组件呢？keep-alive是Vue提供的一个抽象组件，它主要用于缓存动态组件，避免组件切换过程中导致...

JavaScript ArrayBuffer的读写与类型转换

白瑕的博客

10-01

512

所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.

vue-live2d看板娘集成方案设计使用教程