网站首页 > 文章精选 正文
keep-alive
vue中keep-alive
既然上一篇中说到了Vue的生命周期,出现了keep-alive字段,那么这一篇就来说说对keep-alive的理解吧!
keep-alive: Vue 提供的一个内置组件,用来对组件进行缓存——在组件切换过程中将状态保留在内存中,防止重复渲染DOM,提高渲染的性能,减少渲染时间和提高用户的体验感。
在应用中,一个组件包裹了 keep-alive,那么它会多出两个生命周期:deactivated、activated。同时,beforeDestroy 和 destroyed 就不会再被触发了,因为组件不会被真正销毁。
1、activated
在 keep-alive 组件激活时调用
该钩子函数在服务器端渲染期间不被调用
2、deactivated
在 keep-alive 组件停用时调用
该钩子在服务器端渲染期间不被调用
使用 keep-alive 会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在 activated 阶段获取数据,承担原来 created 钩子函数中获取数据的任务。
当组件被换掉时,会被缓存到内存中、触发 deactivated 生命周期;当组件被切回来时,再去缓存里找这个组件、触发 activated钩子函数。
- 上一篇: Vue中的几个生命钩子函数名称
- 下一篇: 使用VSCode模板提高Vue开发效率
猜你喜欢
- 2025-03-07 2023近期前端面试遇到的题(前端初级)
- 2025-03-07 web前端54道题面试题的问题集合
- 2025-03-07 【直接收藏】前端 VUE 高阶面试题(一)
- 2025-03-07 vue中keep-alive组件的作用和原理
- 2025-03-07 YAAT-Yat Another ActionTab开发(1)—— 拖拉拽组件
- 2025-03-07 四、vue3 生命周期钩子函数介绍
- 2025-03-07 Vue2到Vue3你必知的生命周期钩子函数,快速搞定Vue组件优化
- 2025-03-07 vue3-生命周期
- 2025-03-07 使用VSCode模板提高Vue开发效率
- 2025-03-07 Vue中的几个生命钩子函数名称
- 最近发表
-
- 100%开源免费的低代码/可视化数据分析、数据展示平台
- Spring Boot跨域问题终极解决方案:3种方法根治CORS报错
- 永久免费内网穿透很简单,一看就明白
- Odoo 用户菜单架构解析及创建和管理实战
- 关于编码的那些事 - URL 编码(编码url是什么意思)
- 20 个让人惊叹的 JavaScript 单行代码技巧,效率瞬间提升
- 如何使用java.net.URLConnection发起和处理HTTP请求
- 崩溃!代码总掉链子?6 个 JavaScript 技巧助你稳操胜券
- 抓狂!代码总出错?5 个 JavaScript 技巧助你逆风翻盘
- 前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!
- 标签列表
-
- newcoder (56)
- 字符串的长度是指 (45)
- drawcontours()参数说明 (60)
- unsignedshortint (59)
- postman并发请求 (47)
- python列表删除 (50)
- 左程云什么水平 (56)
- 计算机网络的拓扑结构是指() (45)
- 稳压管的稳压区是工作在什么区 (45)
- 编程题 (64)
- postgresql默认端口 (66)
- 数据库的概念模型独立于 (48)
- 产生系统死锁的原因可能是由于 (51)
- 数据库中只存放视图的 (62)
- 在vi中退出不保存的命令是 (53)
- 哪个命令可以将普通用户转换成超级用户 (49)
- noscript标签的作用 (48)
- 联合利华网申 (49)
- swagger和postman (46)
- 结构化程序设计主要强调 (53)
- 172.1 (57)
- apipostwebsocket (47)
- 唯品会后台 (61)
- 简历助手 (56)
- offshow (61)