Vue中 与keep-alive有关的生命周期

最新推荐文章于 2024-08-01 14:54:50 发布
最新推荐文章于 2024-08-01 14:54:50 发布
阅读量3.3k 收藏
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59229847/article/details/121185580
版权
Vue中的keep-alive组件用于缓存组件状态，避免重复渲染导致的性能浪费。当组件被缓存时，会触发activated和deactivated生命周期钩子。activated在组件挂载后和更新前调用，若组件未被缓存则不生效；deactivated则在组件停用时调用。
摘要由CSDN通过智能技术生成

1.组件缓存

      在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染，

      如果没有缓存，每点击一次导航，内容区就会创建一个组件，该组件会经历整个生命周期，每点击一次，就会创建一个组件，比较浪费性能

     在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子：activated与deactivated。

---------------------------------------

一、Activated钩子调用时机:

官网说其是在服务器端渲染期间不被调用，说白了其就是在挂载后和更新前被调用的。但如果该组件中没有使用缓存，也就是没有被<keep-alive>包裹的话，activated是不起作用的。

二、Deactivated钩子调用时机：

keep-alive组件停用时调用

Grey..
关注
vue生命周期、路由守卫、keep-alive
Darlingmi的博客
03-07 1382
vue路由守卫钩子函数~ 完整的生命周期~ keep-alive用法~
keep-alive属性及生命周期
gu_eu的博客
11-28 2320
keep-alive属性及生命周期keep-alive应用场景keep-alive的生命周期 keep-alive Props 的使用 include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 当组件在 内被切换，它的 activated 和 deactivated 这两个生命
[js] 说说你对js沙箱的理解，它有什么应用场景？
歌谣的博客
01-06 491
[js] 说说你对js沙箱的理解，它有什么应用场景？ 在微前端有用到js沙箱，例如qiankun框架，主应用的js运行和子任务的js运行不会相互影响，是使用es6的proxy来实现的 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
vue中 keep-alive 的使用
FE-阿阳的博客
02-02 6040
vue中 keep-alive 的使用 问题描述 在业务开发中，会有路由跳转但是返回需要保留数据的场景；vue 中提供了 keep-alive 来处理 解决方案 返回dom不让其重新刷新，在vue-view外面包一层, 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivate
Vue 3 KeepAlive
最新发布
七月
08-01 545
是 Vue 3 中引入的一个内置组件，用于在动态组件之间缓存 DOM 状态。它允许你在切换组件时保留组件的状态，从而提高应用的性能和用户体验。本文将详细介绍 的使用场景、使用方法以及一些最佳实践。频繁切换的组件： 当应用中有一些组件需要频繁切换，但每次切换都重新渲染会导致性能问题时，可以使用 来缓存这些组件的状态。表单组件： 在表单组件中，用户可能会频繁地在不同表单之间切换。使用 可以保留表单的输入状态，避免用户重复输入。复杂组件： 对于一些复杂的组件，初始化或销毁的成本较高。使用 可以避免频繁的初
vue使用keep-alive后组件生命周期的变化
weixin_45966674的博客
08-14 1537
因为 之前这个组件已经被缓存了 不需要再初始化了 所以 就只有 activated被执行了 组件的生命周期 和数据 以及方法 都是从缓存中取出的 并没有初始化。因为keep-alive组件 并不会被销毁 只是被记录在缓存里了 所以 keep-alive组件销毁时只会触发deactivated。然后我们点击关闭时 是用 v-if销毁了组件 大家知道 v-if 条件不成立时 组件会被直接从dom中移除。Destroyed 组件销毁时触发的生命周期。.
keep-alive及其生命周期的使用
var_infinity的博客
01-08 1189
如果需要每次进入页面时，都执行一些方法，可以在最外层包裹一层这样每次进入页面就会执行你想执行的方法，如果只需要执行一次，那么放在mounted中，不失为一种很好的选择。router-view也是一个组件，如果直接包含在keep-alive里面，那么所有路径中，符合匹配的都会被缓存。用法与缓存组件相同。当引入keep-alive 的时候，页面第一次进入，钩子函数的触发顺序：created。也不会出现在组件的父组件链中。keep-alive的作用是缓存组件内部状态，避免重复渲染。
【VUE】keep-alive以及生命周期
weixin_45884080的博客
05-25 5221
keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。 使用方法 <keep-alive include='include_components' exclude='exclude_components'> <component> <!-- 该组件是
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
vue中keep-alive内置组件缓存的实例代码
01-19
1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的重新创建呢） 3. 会多出两个生命周期的钩子函数 a. activated 缓存激活 第...
vue组件 keep-alive 和 transition 使用详解
01-19
当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。 ...
vue 中的keep-alive实例代码
10-18
在Vue.js框架中，`keep-alive`是一个特殊的组件，用于缓存子组件的状态，防止在切换路由时组件被销毁并重新创建。这在某些场景下非常有用，比如当你需要保持用户界面的状态，或者避免重复加载昂贵的计算或数据。下面...
vue使用keep-alive保持滚动条位置的实现方法
10-17
当跳转到下一个页面后，我们再在页面激活时（如在<keep-alive>的activated生命周期钩子中）将保存的滚动条位置设置回页面元素上。 实现的关键代码如下： 1. 在定义路由时，给需要保持滚动条位置的路由增加一个meta...
keep-alive有关的生命周期有那些？
往前爬的蜗牛
05-09 1931
和keep-alive有关的生命周期有那些？ 前言： 在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染，在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染 <keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。 生命周期函数：在被keep-alive包含的组件/路由中，会
Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序
热门推荐
muzidigbig的博客
01-16 3万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期主要共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/
Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]详解
鸡血博客
04-08 1525
前言 说到Vue的钩子函数，可能很多人只停留在一些很简单常用的钩子(created,mounted)，而且对于里面的区别，什么时候该用什么钩子，并没有仔细的去研究过，且Vue的生命周期在面试中也算是比较高频的考点，那么该如何回答这类问题，让人有眼前一亮的感觉呢... Vue-Router导航守卫： 有的时候，我们需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进...
加入keep-alive会执行那些生命周期？
qq_51150009的博客
06-27 94
如果第一次进入keep-alive组件会执行前四个生命周期+activated。第二次和第n次只执行activated。
谈谈vue的路由守卫和keep-alive后生命周期
青春木鱼的博客
12-22 1003
这篇文章主要为大家详细介绍了vue路由守卫和keep-alive，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助！
vue的keep-alive和生命周期钩子函数
HANGSOME123的博客
07-24 1万+
1.keep-alive的生命周期 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。 2.基本用法 可以将 是否包裹 keep-alive 通过参数配置； <keep-alive> <ro...
vue3,keep-alive,生命周期
04-04
Vue 3是一种流行的JavaScript框架，用于构建用户界面。它是Vue.js的最新版本，带来了许多新的特性和改进。下面是对Vue 3、keep-alive和生命周期的介绍： 1. Vue 3：Vue 3是Vue.js的最新版本，相比于Vue 2，它带来了一些重要的改进。其中最显著的改变是使用了新的响应式系统，即Composition API。Composition API允许开发者更灵活地组织和重用组件逻辑。此外，Vue 3还提供了更好的性能和更小的包大小。 2. keep-alive：keep-alive是Vue.js提供的一个内置组件，用于缓存动态组件或者组件树。通过将需要缓存的组件包裹在<keep-alive>标签中，这些组件将会被缓存起来，而不是每次重新渲染。这在需要频繁切换组件时可以提高性能。 3. 生命周期：在Vue.js中，每个组件都有一系列的生命周期钩子函数，用于在组件不同阶段执行特定的操作。常见的生命周期钩子函数包括：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount和unmounted等。这些钩子函数允许开发者在组件创建、挂载、更新和销毁等不同的阶段执行自定义的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值