vue动态keep-alive无法触发activated钩子函数问题

最新推荐文章于 2024-06-11 11:00:27 发布
最新推荐文章于 2024-06-11 11:00:27 发布
阅读量3.6k 收藏 1
点赞数 1
分类专栏： 就爱学习 Vue 前端 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chendong0008/article/details/120143063
版权
Vue 同时被 3 个专栏收录
14 篇文章 0 订阅
订阅专栏
前端
13 篇文章 0 订阅
订阅专栏
就爱学习
5 篇文章 0 订阅
订阅专栏

vue动态keep-alive缓存用户页面是根据进入的时候把需要缓存的页面的name先放到vuex中的state，然后再离开页面路由离开的时候去清楚这个vuex的state页面的name进行清除操作，下次再进去需要缓存的话就重新把页面name放到vuex中即可实现动态缓存页面。

坑1： 需要先把需要的缓存页面name设置到vuex的state中，否贼会进入这个页面的时候不会触发actived方法，导致界面出现错误（页面上的所有方法和值都有错误，值无法更新问题）

坑2： 最好每个页面的name都写上，否贼缓存会出现问题，无法进行页面的缓存是因为没找到组件的name，缓存的name是组件的name属性，不是router的name属性，记住一句话就是不管哪个页面写上name就对了。

顺便分享一波个人公众号,关注关注我呗，分享一些你们需要的资源，大家一起进步。

会分享一些视频资源的哦（免费哟）

输入图片说明

 

SunGodD00
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中keep-alive组件的深入理解
10-14
然而，使用`<keep-alive>`时，组件的生命周期钩子函数会受到影响。通常的生命周期钩子如`created`、`mounted`等可能在返回时不会再次执行，这可能导致某些预期的行为无法正常工作，比如数据的初始化或者接口请求。 ...
vue 中的keep-alive实例代码
10-18
### activated钩子函数 当一个被缓存的组件再次进入视图时，Vue会触发`activated`钩子函数，这个函数可以用来清除组件数据或执行初始化操作。例如： ```javascript export default { data() { return { data: '...
vue 组件初始化为啥不执行activated分析
uniquepeng的博客
04-14 4495
结论：子组件在页面初始化时没有加载，而是通过异步请求方式来控制组件是否要加载 通过v-if来控制的，这样导致页面父组件已经初始化完成时子组件才开始渲染，从而不执行子组件的activated钩子函数。后延时函数换成new Promise函数后可以实现子组件初始化时执行activated，所以我弱弱的觉得是父组件执行activated之前渲染子组件，就可以初始化时触发子组件的activated。问题描述：页面初始化时即页面第一次打开或者刷新浏览器时，父组件会执行created和activated。
Vue中使用keep-alive导致mounted和beforeDestroy钩子函数失效
天问博客-专注于大前端技术
08-17 2590
最近在 Vue 项目中给页面加水印，发现了一个比较奇怪的现象，有的页面水印颜色深，有的页面水印颜色浅，特别是在主题色（背景色）很重的页面，水印看起来格外显眼。经 code review 发现页面使用了 组件缓存，导致 mounted 和 beforeDestroy 钩子函数中的方法不能正常被调用。...
vue2 keep-alive无法触发activated
最新发布
WKJYC的博客
06-11 167
vue2 keealive失效
VUE：keep-alive的两个钩子函数activated与deactivated activated不触发 deactivated不触发
qq_38402659的博客
05-14 6658
如下转自Vue官网：https://cn.vuejs.org/ activated 类型：func 触发时机：keep-alive组件激活时使用； deactivated 类型：func 触发时机：keep-alive组件停用时调用；
vue学习----activated 触发不了事件
热门推荐
八月
01-06 1万+
methods:{ handleScroll(){ console.log(document.documentElement.scrollTop) } }, activated(){ window.addEventListener('scroll',this.handleScroll) } activated,deactivated这两个生命周期函数一定是要在...
记一次vue 的keep-alive踩坑之路 —— active和deactivated()函数不执行
qq_38918953的博客
12-11 4771
现象：路由頁面被缓存，销毁阶段函数不执行，active和deactivated()函数不执行，进入页面的created函数（创建期函数）执行。 原因： <template> <div id="app"> <keep-alive v-if="$route.meta.keepAlive"> <div> //未激活 ...
Vue 钩子函数activated未触发
一枚小趴菜(´▽`)ﾉ
08-26 3989
qwq
vue中keep-alive内置组件缓存的实例代码
01-19
需求： home 组件中有一个 name 的 data 数据。这个数据修改之后，再切换到其他的组件。再切换到 home 组件，...3. 会多出两个生命周期的钩子函数 a. activated 缓存激活 第一次会触发、组件能被看到 一般根 created
vue 使某个组件不被 keep-alive 缓存的方法
12-11
提出问题 最近在做项目发现一个问题，当我...当组件在 keep-alive 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 include – 字符串或正则表达式。只有匹配的组件会被缓存。 exc
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
10-18
本文将深入探讨Vue的钩子函数，特别是路由导航守卫和`keep-alive`组件，以及生命周期钩子。 首先，Vue的生命周期钩子是我们在组件创建、更新和销毁过程中可以利用的关键点。以下是一些常见的生命周期钩子： 1. `...
Vue项目实战（06）- 钩子方法触发失败的解决
阿甘兄
07-13 1427
文章目录1. 引言2. 引出问题3. 解决方案 1. 引言 在前面的章节，已经讲解了部分vue-element-admin的知识： 《Vue项目实战（01）-vue-element-admin项目结构分析》 《Vue项目实战（02）-Vuex状态管理模式》 《Vue项目实战（03）-alias》 《Vue项目实战（04）-axios封装》 《Vue项目实战（05）-多环境配置》 本文要讲解的是钩子触发失败的问题。 2. 引出问题 有时候我们使用router-view的时候，因为是同一个组件conpome
vue3 keep-alive 页面切换不触发onActivated和onDeactivated方法周期
凯扣叮博客
06-20 1万+
vue3 keep-alive 页面切换不触发onActivated和onDeactivated生命周期
[Vue]使用keep-alive第一次失效，第二次进入才正常
weixin_44099060的博客
01-04 3194
从’home‘返回到’summary‘的时候保持页面不刷新 最开始使用路由护卫（BeforeRouteLeave和beforeLeave）以及在页面路由中设置meta下keepAlive参数来控制keep-alive组件的显示。 但是在第一次进入的时候页面仍然刷新，第二次今进入才会生效，找了半天为什么这样，索性把这些都拆了，直接使用监听，在根页面按照路由跳转的to和from来判断是否需要keep-alive生效。 直接在app.vue路由监听就行 代码提交后想到，为了节省资源其实可以再keep-alive
vue-admin 页面缓存与数据加载问题(keep-alive与activated生命周期函数)
yehaocheng520的博客
11-24 2907
vue-admin 是后台管理系统模板 页面缓存为何物？ keep-alive在哪里？ 在vue-admin文档结构中，src目录下的layout目录下，有个Index.vue文件，在此文件中，appMain是作为页面的主体部分展示的，打开对应的组件可以看到： key(){return this.$route.path} 是将所有的路径都缓存了。 缓存是我们想要的，但是页面还是要刷新。 页面刷新 从上面图片可知，通过keep-alive缓存的页面，可以通过activated生命周期函数进行页面
vue中，页面使用＜keep-alive＞缓存，页面切换不调用beforeDestroy和destroyed
柒个橙子的博客
03-29 3592
不设置keep-alive，离开当前路由时，会调用beforeDestroy和destroyed来销毁。 当设置keep-alive之后，不会直接调用这组销毁生命周期函数，而是在生命周期函数中新增两个：activated和deactivated。 第一次进入页面时，生命周期函数执行简单来说是这样的： 当退出时，会触发deactivated()函数； 当再次进入该页面时，只会执行activated()函数。 配合导航守卫，手动调用生命周期销毁函数 beforeRouteLeave (to, from,
keep-alive 标签/组件包裹的内容不更新，希望再次进入实现数据更新逻辑
Shimeng_1989的博客
12-21 249
keep-alive 标签/组件包裹的内容不更新，希望再次进入实现数据更新逻辑
vue中缓存页面-keep-alive，activated的使用及注意事项
cage7181的博客
03-15 2675
注意一、组件使用<keep-alive>标签包裹或者在router里的meta设置keepAlive为true，否则activated不生效。 meta: { keepAlive: false }, 注意二、一定要在返回上一页或者在去往其它页面时清掉缓存 举例说明：A页面去往B页面，然后B页面返回A页面（A页面表单选中的值不能丢失），A页面点击某个按钮去往C页面。 这样的话，我们就需要缓存A页面，然后B页面返回时，A页面只执行activated，不会执行create
vue3 keep-alive使用
04-28
Vue3 的 `keep-alive` 指令用于缓存已经渲染过的组件，以避免重复渲染。使用 `keep-alive` 指令的组件会从 DOM 树中移除，但不会被销毁，其状态会被保存下来。当组件再次被渲染时，其状态会被恢复，而不是重新创建。 下面是 `keep-alive` 的基本使用方法： 1. 在需要被缓存的组件外包裹 `keep-alive`： ``` <template> <keep-alive> <YourComponent /> </keep-alive> </template> ``` 2. 在被缓存的组件中使用 `activated` 和 `deactivated` 钩子函数： ``` <script> export default { activated() { // 组件被激活时触发 }, deactivated() { // 组件被停用时触发 } } </script> ``` 需要注意的是，`keep-alive` 只会缓存有 `name` 属性的组件。如果组件没有 `name` 属性，则会抛出警告。另外，`keep-alive` 中的组件不会被销毁，因此需要手动清理组件状态，以避免内存泄漏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值