Vue 使用keep-alive缓存后页面触发钩子

最新推荐文章于 2023-11-28 08:37:44 发布
最新推荐文章于 2023-11-28 08:37:44 发布
阅读量1.4k 收藏 2
点赞数
文章标签： vue.js 缓存 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33475629/article/details/122441509
版权
本文介绍了在Vue中使用keep-alive缓存组件时组件生命周期的变化。当不使用keep-alive时，组件会经历beforeRouteEnter、created、mounted和destroyed这几个阶段。而使用了keep-alive后，组件会在激活时经历beforeRouteEnter、activated和deactivated阶段，created和mounted阶段则不会重复执行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、不使用keep-alive：

beforeRouteEnter --> created --> mounted --> destroyed

二、使用keep-alive：

beforeRouteEnter --> created --> mounted --> activated --> deactivated

再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated，created和mounted不会再执行

qq_33475629
关注
vue 生命周期 钩子函数 keep-alive activated deactivated
global_coding的博客
06-13 1703
vue 生命周期 钩子函数 keep-alive activated deactivated
示例vue 的keep-alive缓存功能的实现
10-17
Vue.js 是一款流行的前端框架，它的缓存功能主要通过 `<keep-alive>` 组件来实现。这个组件的主要作用是在组件切换时保持组件的状态，避免每次切换都重新渲染，从而提高性能并优化用户体验。在 Vue 中，`<keep-alive...
vue中keep-alive、activated的探讨和使用
热门推荐
qq_38861711的博客
08-02 3万+
在修改公司的一个项目的时候发现了activated这个东西，一直觉得很疑惑，之前也没怎么用过啊！官网的生命周期那也没说过这东西啊！生命周期不就create mount update 和destory这几个东东么，怎么多了个activate出来。 百思不得其解，于是去问了下度娘和查了下文档！恍然大悟，原来这东东是结合keep-alive这东东使用的，下面顺便记录一下。   keep-ali.........
使用keep-alive进入下个页面时会触发当前页面的created和mouted，解决方案！
qq_15235069的博客
06-13 3390
问题代码： 大部分人使用keep-alive都是用上面这个方法就会出现当你想进入下个页面时就是触发当前页面的created和mouted,这对性能上就会很不友好。 和 prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示： 2.用法说明 include可以使用 匹配想要换成的缓存 * 组件的name *name指的是定义组件是声明的name，注意： 不要用成vue-router里面定义的name示例 这样写进入下个页面时就不会触发created和mouted，使用时有什
vue的keep-alive和生命周期钩子函数
HANGSOME123的博客
07-24 1万+
1.keep-alive的生命周期 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。 2.基本用法 可以将 是否包裹 keep-alive 通过参数配置； <keep-alive> <ro...
彻底搞懂Vue中keep-alive
一只小白奔向大牛的故事
09-23 6855
彻底搞懂Vue中keep-alive的魔法(上) 上一节最后稍微提到了Vue内置组件的相关内容，从这一节开始，将会对某个具体的内置组件进行分析。首先是keep-alive，它是我们日常开发中经常使用的组件，我们在不同组件间切换时，经常要求保持组件的状态，以避免重复渲染组件造成的性能损耗，而keep-alive经常和上一节介绍的动态组件结合起来使用。由于内容过多，keep-alive的源码分析将...
vue.js生命周期钩子函数及缓存
weixin_30492601的博客
03-29 182
　　在使用vue.js进行开发时，使用最多的就是created、mounted、activated。 　　由于有些情况下，我们需要复用某些组件，因此需要用到keep-alive。 　　当引入keep-alive时，页面第一次进入，钩子的触发顺序是created-> mounted-> activated。当再次进入该页面时，只触发activated。 　　因此，应该activat...
vue中keep-alive内置组件缓存的实例代码
01-19
将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍： 1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的...
解决vue keep-alive 数据更新的问题
12-01
这就是为什么使用`<keep-alive>`后，页面数据无法更新的问题所在。 为了解决这个问题，我们需要将数据获取的逻辑迁移到`activated`钩子中。因为`activated`在组件被缓存并重新激活时会触发，这确保了每次组件被显示...
基于vue中keep-alive缓存问题的解决方法
10-17
在使用Vue框架开发Web应用时，经常会利用`<keep-alive>`组件来缓存组件状态，以避免重复渲染导致的性能开销。然而，这种缓存机制在某些场景下可能会导致数据更新不及时的问题。本文就讨论了在使用`<keep-alive>`时...
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
10-17
《深入理解与使用keep-alive缓存路由页面》 在Vue.js开发中，有时我们需要保持组件的状态，避免在页面切换时重新渲染，提高用户体验。这时，`<keep-alive>`组件就显得尤为重要。本文将详细介绍如何配合`router-view...
vue中的keep-alive详解与应用场景
唯见青山不见君
11-28 7271
vue中的keep-alive详解与应用场景
vue 中 keep-alive缓存机制
编码世界
04-15 1275
为什么能够缓存数据呢？ 不使用keep-alive时，钩子函数执行顺序为： -beforeRouteEnter——created——mouted——destroyed 使用keepalive时，钩子函数执行顺序为： 1、第一次进入缓存界面：beforeRouteEnter——created——mounted——activated——deactivated 2、再次进入缓存页面时，执行顺序为beforeRouteEnter——activated——deactivated ...
vue中路由组件的数据缓存和特殊钩子-activated和deactivated
aliven1的博客
12-01 797
路由组件缓存多个和单个指定的组件 缓存路由组件特殊的钩子 可以用来请求接口，清楚定时器
vue中keep-alive和activated,deactivated
nanzhuhe的博客
03-20 926
created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次； 当页面存在keep-alive时，此时切换页面，页面不会刷新，那么如果想要页面重新渲染的话就要用到activated,deactivated activated,deactivated只有存在keep-alive时才会存在 ...
vue路由在使用keep-alive缓存之后第二次进入页面created和mounted不执行问题及解决
jieyucx的博客
06-14 9520
Vue.js中keep-alive是一个内置组件，可以在需要缓存的组件上添加keep-alive标签，使得这个组件被缓存起来，不会被多次渲染和销毁。keep-alive组件有两个独立的生命周期钩子，分别是activated和。
Vue keep-alive后不能触发destroyed
u012174809的专栏
05-13 4336
<keep-alive :include="cachedViews"> <router-view :key="key" /> </keep-alive> 当我们在项目中配置了keep-alive后，会发现页面关闭不能触发beforeDestroy。 首先我们来看看keep-alive是什么东西 keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。 它的作用不言而喻 用来...
Vue keep-alive 使用及缓存机制详解
xiaoyaGrace的博客
05-27 1746
前言在VUE项目中，有些组件或者页面没必要多次渲染，所以需要将部分组件有条件的在内存中进行"持久化",不过这里的持久化不是简单的数据持久化，而是整个组件（包括数据和视图）的持久化，刚好VUE提供了<keep-alive>这个内置组件来完成这件事情。<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组...
vue keep-alive缓存个别页面
最新发布
02-18
### 使用 Vue 的 `keep-alive` 组件缓存特定页面 #### 配置 `keep-alive` 实现高效组件管理 为了提高单页应用程序(SPA)中的性能并减少不必要的重新渲染，Vue 提供了 `<keep-alive>` 标签用于包裹动态组件，在组件切换时自动保存进入缓存的状态。当再次访问被缓存的视图时，可以快速恢复之前的状态而不必重新加载整个组件实例。 针对仅需缓存部分而非全部子路由的情况，可以通过设置 `include` 或者 `exclude` 属性来精确控制哪些组件应该被保留于内存之中[^1]： ```html <keep-alive :include="['listPage']"> <router-view></router-view> </keep-alive> ``` 上述代码片段展示了如何利用 `include` 参数指定名称为 `'listPage'` 的组件作为唯一允许缓存的对象；而其他未提及的名字则不会受到此标签的影响，每次导航至这些路径都会创建新的实例[^2]。 #### 动态调整缓存策略适应不同需求 除了静态定义外，还可以通过绑定属性的方式使缓存名单变得灵活多变。例如依据当前用户的操作习惯或是业务逻辑的变化实时增删项名，从而达到更精细化的操作效果: ```javascript data() { return { cachedPages: ['home', 'about'] } } // ... <keep-alive :include="cachedPages"> <!-- ... --> </keep-alive> ``` 这种方法使得开发者能够在运行期间根据实际情况修改要保持活动状态的具体范围，增强了灵活性的同时也提高了资源利用率[^3]。 #### 处理缓存带来的副作用 值得注意的是，启用 `keep-alive` 后可能会遇到一些意想不到的问题，比如某些情况下即使离开了某个页面再回来其内部的数据也没有刷新等问题。为了避免这种情况发生，可以在激活钩子里手动触发数据获取动作，确保显示的内容是最新的版本[^4]: ```javascript activated() { this.fetchData(); }, deactivated() { console.log('Component deactivated'); } ``` 以上就是在 Vue.js 中运用 `keep-alive` 来优化 SPA 性能以及解决潜在问题的一些最佳实践建议。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值