Keep-alive

15《Vue 入门教程》Vue 动态组件 & keep-alive

1.前言本小节我们将介绍Vue的动态组件，以及缓存keep-alive的使用。包括动态组件的使用方法，以及如何使用keep-alive实现组件的缓存效果。
木子教程·2024-01-23 03:05

Vue keep-alive详解

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中。1.使用router.meta属性，预先定义需要缓存的组件>路由部分：routes:[{path:'/test1',component:test1,meta:{keepAlive:true
前端新阳·2024-01-22 16:46

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

大家都知道，使用keep-alive组件即可，但是使用keep-alive缓存页面后，发现虽然页面缓存成功了，但是列表的滚动条又自动回到了最上方。是的，keep-alive组件是不会缓存滚动位置的。
前端呆头鹅·2024-01-22 11:04

react页面缓存：React Keep Alive和React-Keeper

vue中有keep-alive进行页面缓存，react提倡尽可能少的api以减少开发者的使用成本，并没有提供相关的api（我觉得这样更麻烦了），需要自己手写，我从git找到两种评价较高的对应插件分析给大家
super_wanan·2024-01-22 11:02

React 中保存页面状态/在react中实现vue的keep-alive/React Activation

1.背景用户访问了一个列表页，点击查进入详情页，从详情页退回列表页时，需要停留在离开列表页时的浏览位置上在React中，我们通常会使用路由去管理不同的页面，而在切换页面时，路由将会卸载掉未匹配的页面组件，所以上述列表页例子中，当用户从详情页退回列表页时，会回到列表页顶部，因为列表页组件被路由卸载后重建了，状态被丢失。2.常见的解决方式(1)手动保存状态：配合React组件的componentWil
圆圆小朋友·2024-01-22 11:32

react react-activation keep-alive 实现路由跳转返回保留组件状态

文章目录reactreact-activationkeep-alive实现路由跳转返回保留组件状态1.react-activation安装2.在入口文件引入并使用`AliveScope`包裹3.在路由文件中用`KeepAlive`包裹需要保持状态的组件4.注意事项reactreact-activationkeep-alive实现路由跳转返回保留组件状态react-activation官方文档1.r
kk_6·2024-01-22 11:01

React 页面缓存 keep-Alive

官方推荐使用状态管理器来缓存页面。搭建好状态管理器（这里用zustand）；//index.tsximportpageKeepAlivefrom'./module/pageKeepAlive';conststore={pageKeepAlive}exportdefaultstore//pageKeepAlive.tsimportcreatefrom'zustand'import{persist}f
肉松圆圆·2024-01-22 11:00

React-Route6实现keep-alive效果

一、基于react-route6useOutlet实现二、代码呈现importReact,{useRef,createContext,useContext}from'react'import{useOutlet,useLocation,matchPath}from'react-router-dom'importtype{FC}from'react'//在组件外部建立一个Contextexportc
姑老爷呀·2024-01-22 11:29

react实现keep-alive

在项目中会遇到这样一个场景上拉了N页的时候点进详情然后再返回列表，列表会重置，这里就需要对页面进行缓存，类似vue的keep-alive。
前端-wjh·2024-01-22 11:29

React 中保存页面状态，在react中实现vue的keep-alive，React Activation

今天有个业务需求，在列表页筛选查询条件后，进入详情页，返回列表页时，筛选条件还存在。选中了ReactActivation插件，使用如下：这是参考文档：react-activation/README_CN.mdatd08219cba1fd3bc2ddd18b382eac656f1826d65d·CJY0208/react-activation·GitHub1、安装yarnaddreact-activ
LLL_LH·2024-01-22 11:56

react 实现页面状态缓存（keep-alive）

前言：因为react、vue都是单页面应用，路由跳转时，就会销毁上一个页面的组件。但是有些项目不想被销毁，想保存状态。比如：h5项目跳转其他页面返回时，页面状态不丢失。设想一个页面我滑倒了中间，然后跳转到详情页然后返回，之前的页面刷新了，回到顶部了肯定不行（搜索条件之类的消失了，滚动条回到顶部了）！比如：pc端项目后台管理项目里点击时打开一个页签，页签切换，状态页会丢失。每次切换页签都重新请求了接
崽崽的谷雨·2024-01-22 11:53

keep-alive组件缓存

keep-alive组件缓存从a跳b，a已经销毁，b重新渲染；b跳a，b销毁a重新渲染源组件销毁，目标组件渲染组件缓存：组件实例等相关（包括vnode）存储起来重新渲染指的是：把视图重新编译成新的vnode
betterangela·2024-01-21 07:29

keep-alive介绍及应用场景

HTTPkeep-alive项目中使用axios开启HttpKeep-Alive//插件constAgent=require('agentkeepalive')constkeepaliveAgent=newAgent({maxSockets:100,maxFreeSockets:10,timeout:60000,freeSocketKeepAliveTimeout:30000})$axios.de
lmmy123·2024-01-21 05:47

keep-alive生命周期

keep-alive生命周期生命周期执行顺序：1、不使用keep-alive的情况：beforeRouteEnter-->created-->mounted-->destroyed2、使用keep-alive
小童姥·2024-01-21 03:49

Vue之keep-alive灵活清除页面缓存

引言对于使用过Vue.js开发过网页的小伙伴，对于keep-alive那可是熟透了，但是对于刚入门的小白，咱还是稍微介绍一下。
派易星·2024-01-20 21:55

2024 前端高频面试题之 Vue 篇

9、keep-alive是什么？怎么实现的？生命
Aybuai·2024-01-20 18:11

VUE3，自定义控制keep-alive缓存

安装插件npminstallvite-plugin-vue-setup-extend--save在vite.config.ts中importVueSetupExtendfrom'vite-plugin-vue-setup-extend'.....plugins：[vue(),VueSetupExtend(),.....]useKeepalive.tsimport{ref}from"vue"expo
日积一步·2024-01-19 19:50

Vue-组件缓存-keep-alive

为了解决这个问题，Vue提供了一个名为keep-alive的抽象组件。下面我们将深入探讨keep-alive的工作原理、使用场景和最佳实践。
盖盖衍上·2024-01-18 14:53

30.Http怎么处理长连接

使用长连接的HTTP协议，会在响应头有加入这行代码：Connection:keep-alive。在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的T
vbuer·2024-01-18 05:13

软件架构设计-网络

Keep-Alive机制和Content-Length属性Http1.0设计了一个Keep-Alive机制来实现TCP连接的复用。
孤独的死锁·2024-01-18 02:01

史上最全！Python爬虫requests库(附案例)

相对于urllib3库，requests库拥有完全自动化Keep-alive和HTTP连接池的功能。r
菜鸟学Python·2024-01-17 21:25

python爬虫requests必须得会

相对于urllib3库，requests库拥有完全自动化Keep-alive和HTTP连接池的功能。requests库包含的特性如
<北巷>·2024-01-17 21:19

前端面试 -- vue系列

v-if优先级5.SPA首屏加载速度慢的原因和解决办法6.Vue中给对象添加新属性界面不刷新（直接给对象添加属性）7.vue组件之间的通信方式有哪些8.对nextTick理解9.slot（插槽）理解10.对keep-alive
L北杳·2024-01-15 19:57

前端开发面试必备的13道可以举一反三的Vue面试题

vue中keep-alive组件的作用?
野生程序猿A·2024-01-15 08:13

Vue中的keep-alive缓存组件的理解

是一个抽象组件，用于将其内部的组件保留在内存中，而不会重新渲染。这意味着当组件在内部切换时，其状态将被保留，而不是被销毁和重新创建。用来缓存不经常变化的组件，以提高性能，当我们在不同路由之间进行切换或者是动态改变组件时，可以确保被缓存的组件保留之前的一个状态，而不会重新执行created和mounted等生命周期钩子函数。那么会提供activated和deactivated生命周期钩子函数的应用，
小安吖~·2024-01-15 06:35

Vue源码分析—组件化(五)

组件注册在Vue.js中，除了它内置的组件如keep-alive、component、transition、transition-group等，其它用户自定义组件在使用前必须注册。
oWSQo·2024-01-14 14:54

Vue keep-alive的使用和原理解析

✨专栏介绍在当今Web开发领域中，构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架，正是为了满足这些需求而诞生。它采用了MVVM架构模式，并通过数据驱动和组件化的方式，使我们能够更轻松地构建出优雅而高效的Web应用程序。在本专栏中，我们将深入学习Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。无论你是初学者还
俊刚、·2024-01-14 06:47

Vue中 keep-alive的实现原理分析

keep-alive的实现原理使用vue的时候，想必大家都是用过keep-alive，其作用就是缓存页面以及其状态。
时清云·2024-01-12 09:42

长连接 每天学习一点点【记录，草稿】

在HTTP/1.1版本及以上，默认使用长连接，通过在响应头中添加“Connection:keep-alive”来实现。长连接并不是永久保持连接，而是有一个保持时间，可
许科大·2024-01-11 04:44

keep-alive页面缓存问题

业务场景：现有A，B页面和其他所有页面（以下用C表示）。B页面为缓存页面，meta.keepAlive为true，当A页面进入B页面后，B页面需要渲染为不缓存的状态（效果等同第一次进入B页面），离开B页面后缓存B页面，也就是说B->A或者B->C都将B页面缓存。只有在特定情况下（A进入B）清除B页面的缓存。以上这种方式，设置了keepAlive为true后，B页面是一直会进行缓存查阅vue相关文档
Demons_51fe·2024-01-11 03:29

前端基础 keep-alive的使用(Vue)

用法keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染propsinclude-字符串或正则表达，只有匹配的组件会被缓存exclude-字符串或正则表达式，任何匹配的组件都不会被缓存
码路老默007·2024-01-10 22:38

2020-02-14

id=abc导航守卫keep-alive是Vue
竹子和鸟儿·2024-01-09 15:06

Vue动态组件 & keep-alive

前言在vue中，实现Tab切换主要有三种方式：使用动态组件，使用vue-router路由，使用第三方插件。本文将详细介绍Vue动态组件。所谓动态组件就是让多个组件使用同一个挂载点，并动态切换。一、is用法通过使用保留的元素，动态地绑定到它的is特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据v-bind:is="组件名"中的组件名去自动匹配组件，如果匹配不到则不显示。改变挂载的组件，只需
dingFY·2024-01-09 06:22

前端八股文（网络篇）一

目录1.Get和Post的请求的区别2.常见的HTTP请求头和响应头3.常见的HTTP请求方法4.HTTP与HTTPS协议的区别5.对keep-alive的理解6.页面有多张图片，HTTP是怎样的加载表现
前端VC·2024-01-08 22:19

计算机基础面试题 |15.精选计算机基础面试题

Keep-Alive和非Keep-Alive有什么区别？三
ai_todo·2024-01-08 22:30

vueRouter 配合 keep-alive 不生效的问题

文章目录问题说明案例复现demo结构问题复现和解决其实这个不生效的问题根本也不算一个问题，犯的错和写错单词差不多，但是也是一时上头没发现，所以记录一下，如果遇到同样的问题，也希望可以帮助你早点看到这个哭笑不得的错误，哈哈哈问题说明这里我写了一个非常简单的demo来复现我的问题，我的问题场景出自于一个后台管理系统，我在app.vue中使用了router-view标签，来展示layout和其他一级路由
劫辞·2024-01-08 15:49

vue3.0记录滚动位置的两种方法

第一种方法onActivated+onBeforeRouteLeave方法实现1.思路页面首先要是缓存的组件实例keep-alive用onActivated才能将滚动位置缓存起来每次进入都要将存储的位置重新赋值给页面路由守卫
Smile_zxx·2024-01-08 13:54

flutter项目初始化

flutter项目环境配置2、flutter数据本地存储（shared_preferences）3、GetX中的数据响应式配合本地存储使用4、Dio封装使用详解5、EasyLoading的使用6、缓存keep-alive
weixin_43993776·2024-01-07 16:11

vue动态组件、保持存活

加component:is引入组件名称keep-alive保持存活保持存活：切换组件后，不重新渲染切换的组件，保持切换前（更改文字时）的数据1、点击更换文字；2、变更文字；3、切换组件；4、再次切换组件
花归去·2024-01-06 22:46

浏览器Request Header和Response Header的内容

hello.html(请求的目标资源)HTTP/1.1(请求采用的协议和版本号)Accept:/(客户端能接收的资源类型)Accept-Language:en-us(客户端接收的语言类型)Connection:Keep-Alive
皮卡许·2024-01-05 21:54

vue 页面mounted created函数不执行的问题及解决方法

背景：最近做项目碰到一个很头大的问题第一次跳转页面没有问题返回去后在点击跳转就不执行created和mouted钩子函数里的方法记录下以后别忘了解决这个问题的关键就在于对keep-alive的理解和activated
hongc93·2024-01-03 08:15

vue中的动态组件和混入

、混入全局混入：局部混入：混入规则：一、动态组件component标签动态切换组件,使用is属性切换组件使用component切换组件，组件会不停的创建和销毁，如果想在第一次创建时候缓存组件，可以使用keep-alive
从明天开始好好学习前端·2024-01-02 14:59

vue3 router-view 使用keep-alive报错parentcomponent.ctx.deactivate is not a function

问题如下图，在component组件上添加v-if判断，会报错:parentcomponent.ctx.deactivateisnotafunction解决方法去除v-if，将key直接添加上。由于有的公用页面，需要刷新，不希望缓存，所以需要添加key。其他需要缓存的页面，就不用添加key
少油少盐不要辣·2024-01-02 03:33

Vue中的keep-alive缓存组件的理解

是一个抽象组件，用于将其内部的组件保留在内存中，而不会重新渲染。这意味着当组件在内部切换时，其状态将被保留，而不是被销毁和重新创建。用来缓存不经常变化的组件，以提高性能，当我们在不同路由之间进行切换或者是动态改变组件时，可以确保被缓存的组件保留之前的一个状态，而不会重新执行created和mounted等生命周期钩子函数。那么会提供activated和deactivated生命周期钩子函数的应用.
开心点啦.·2024-01-01 23:36

今天来说说keep-alive的理解

（看完点个关注呗，持续更新）一、Keep-alive是什么keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOMkeep-alive包裹动态组件时，会缓存不活动的组件实例
蓝斑.json·2024-01-01 23:09

vue项目中如何使用keep-alive添加页面缓存

方法1：router.js添加配置参数配置router时添加meta对象，配置路由中需要额外携带的参数信息constroutes=[{path:'/webScreen',name:'截屏',component:resolve=>require(['@/views/webScreen/index.vue'],resolve),meta:{keepAlive:true//需要被缓存}},{path:'
Hermione_log·2023-12-31 22:43

vue 缓存组件keep-alive

也就是所谓的组件缓存//被keep-alive包含的组件会被缓存keep-alive是一个抽象的组件，缓存的组件不会被mounted,为此提供activated和deactivated钩子函数在2.1.0
scriptjojo·2023-12-31 03:46

吐血整理 ＜ keep-alive ＞ 知识，包括使用方法，缓存机制，史上最全

keep-alive作用在组件进行切换的时候，保留缓存Propsinclude-字符串或正则表达式。只有名称匹配的组件会被缓存。exclude-字符串或正则表达式。任何名称匹配的组件都不会被缓存。
最冷一天.·2023-12-30 15:14

vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例

一、什么是keep-alive在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。
邹荣乐·2023-12-30 15:42

使用keep-alive缓存页面 并解决三级菜单不能缓存的问题

直接展示代码1.把含有3级router-view的文件改为exportdefault{name:'Blank'}21).需要把所有页签存在vuex中，可以参考vue-element-admin项目中store有个tagsView.js文件2).在AppMin.vue文件中，如图加上这两句image.pngcachedViews(){//console.log(this.$store.state.t
玄学大师·2023-12-30 13:11
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他