mounted钩子与activated钩子的区别

最新推荐文章于 2024-06-13 17:19:27 发布
最新推荐文章于 2024-06-13 17:19:27 发布
阅读量4.3k 收藏 4
点赞数 2
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/unbreakablec/article/details/86715908
本文探讨了Vue中mounted与activated钩子的区别。mounted钩子在主页挂载时执行，若无缓存，再次访问会重复执行，可能导致数据重复获取。activated钩子则无论有无缓存，每次回到主页均会执行。

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

mounted钩子与activated钩子的区别

mounted钩子在主页挂载时执行一次，如果没有缓存的话，再次回到主页时，mounted还会执行，从而导致ajax反复获取数据。

activated钩子则不受缓存的影响，每次重新回到主页都会执行。

unbreakablec
关注
keep-alive缓存组件使用(6)参数使用说明：钩子周期函数（activated和deactivated）
jieweiwujie的博客
12-28 548
因此一个缓存页面，当有些数据不需要缓存，我们就可以使用这两个钩子函数处理。activated和deactivated
mounted 生命周期和 keep-alive 中 activated 生命周期的优先级
小草莓的博客
10-16 1230
而 keep-alive 是一个用来缓存组件的抽象组件，它自身没有任何展示效果，只是将内部包含的组件缓存起来，从而能够在需要时快速地切换到缓存的组件。当一个组件第一次被挂载时，mounted 生命周期会被触发，同时 keep-alive 中的缓存组件还没有被渲染，因此 activated 生命周期并不会被触发。只有当一个被缓存的组件被激活后（比如从其他页面返回到该组件所在的页面），activated 生命周期才会被触发。在优先级上， mounted 生命周期高于 activated 生命周期。
Vue mounted和created和 activated
weixin_43805387的博客
10-26 1775
我们从图中看两个节点： created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = do...
mounted与activated的执行顺序
Pei_hua100的专栏
09-16 8422
mounted是挂载vue实例后的钩子函数 activated是组件被激活后的钩子函数 mounted的时候 是不保证组件已在document中。也就是说组件还没有被激活，所以activated可以理解为在mounted之后执行。在定义变量和执行函数的时候需要注意放置的钩子函数位置。其次源码实现中，在渲染组件时，也是会先判断是否组件是否挂载过，如果没有会先执行mount的hook函数。 ...
Vue之生命周期mounted、activated区别及实际运用例子解析
angelnotears的博客
08-10 8829
mounted：是挂载vue实例后的钩子函数，钩子在主页挂载时执行一次，如果没有缓存的话， 再次回到主页时，此函数还会执行 activated：是组件被激活后的钩子函数，每次回到页面都会执行 实际运用： 页面 1、列表页面读取后台返回的列表数据，调用 mounted 页面第一次会加载读取回来的列表数据，再返回会继续读取缓存的数据 2、如果列表页面增加了一个新增的调整页面，新增提交成功后，返回页面，则需要增加 activated 读取列表 mounted: function() { .
vue中created、mounted、activated的区别
weixin_43743804的博客
08-12 5496
created：在模板渲染成html之前调用，即通常初始化某些属性值，然后再渲染成视图；但是注意，只会触发一次 mounted：在渲染成html之后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。是挂载vue实例后的钩子函数，钩子在主页挂载时执行一次，如果没有缓存的话，再次回到主页时，此函数还会执行。 activated：是组件被激活后的钩子函数，每次回到页面都会执行 执行顺序：created => mounted => activated ...
vue 生命周期 钩子函数 keep-alive activated deactivated
最新发布
global_coding的博客
06-13 1832
vue 生命周期 钩子函数 keep-alive activated deactivated
Vue学习之---动态组件中的activated与deactivated钩子函数
weixin_43852569的博客
09-09 4538
Vue学习之—被忽视的activated与deactivated钩子函数 在学习这两个钩子函数之前呢，怎么需要先了解下Vue内置的动态组件< component >以及与之相配套的< keep-alive > 组件： 动态组件指的是动态切换组件的显示与隐藏； < component is = " " > 标签，内置组件，占位符，专门用来实现动态组件的渲染； is 属性指定要渲染出来的组件的名字，指定的值是组件的注册名称； is 属性指定的组件名称是什么，就会在<
解决vue项目F5刷新mounted里的函数不执行问题
12-13
项目背景 在主文件index.vue中初始化...因为，mounted是el被新创建的vm.$el替换，并挂载到实例上去之后调用的钩子，此处el并未重新挂载，故该钩子函数不会被调用。 此处可以将用户权限判断的方法根据实际情况写在befo
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
10-18
当组件在`<keep-alive>`内时，它的`activated`和`deactivated`钩子会被调用，类似于`mounted`和`destroyed`，但仅在组件被缓存和恢复时触发。 总结起来，Vue的钩子函数提供了强大的控制力，让我们能在组件的不同...
vue3之生命周期
小李在努力学习
03-24 5194
生命周期
Linux系统挂载有数据硬盘,出现"mount: unknown filesystem type 'LVM2_member"提示
Jeanne_d的博客
12-10 1628
最近和服务器之间发生了很多故事…手头两台服务器出现问题,其中一台无法启动,着急用数据所以打算拆下硬盘挂载到其他服务器上,在Centos6上操作mount挂载命令,提示 mount: unknown filesystem type 'LVM2_member 查资料多是针对扩容的新硬盘挂载方案,会对硬盘进行格式化,显然不行… 在终端执行lvdisplay发现待挂载硬盘状态有问题,提示 LV Stat...
vue之hook使用
ln1138932964的博客
11-30 1999
记录一下vue中hook的两点使用 1.在同一个组件中 例如：在mounted中添加一个监听需要在beforeDistroy中移除这个监听，考虑到某些原因你不想再写个beforeDistroy去实现，这时候绿巨人hook就该登场了！ mounted(){ window.addEventListener('online',this.handleOnline) this.$once('hook:beforeDestroy',function() { window.removeEven
vue组件通信(一)
qq_64209130的博客
08-04 1068
在开发中一个页面会封装成多个组件 , 但是当从服务器请求到许多数据时,子组件和父组件都需要这个数据,这个时候并不会在子组件在发送一次网络请求,而是让大的组件将数据传递给子组件. 父子组件之间的通信 1.通过props向子组件传递数据 prost可以传数组 对象 (对象可以限定数据的类型) 2.通过自定义事件向父组件发送消息 自定义事件 在子组件中通过$emit触发一个自定义事件然后传入参数 this.$emit('onGetEest',this.test) 触发事件调用函数 在父组件中.
Vue高级----hook:beforedestroy、@hook用来监听组件生命周期的回调函数
热门推荐
muzidigbig的博客
01-16 1万+
@hook用来监听组件生命周期的回调函数 @hook是什么？用来监听组件生命周期的回调函数 这和生命周期函数mounted，created，updated有什么区别？ 区别1：@hook 会在对应的生命周期函数执行后执行。 区别2：@hook 可以在父组件监听子组件的生命周期运行情况。 监听第三方组件的生命周期
vue @hook技术总结
T_shiyi的博客
09-18 1908
父组件监听子组件的生命周期，假设现有parent.vue和child.vue 方法一：是我们的常用方法 // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 方法二：在父组件引用子组件时通过 @hook 来监听 // Parent.vue <Child @hook:mounted="doSomething" ></Chil.
@hook扩展分析
s8806479的博客
08-30 1164
hook监听实践应用
vue中清除定时器（在activated使用与methods中使用的区别）
agua001的博客
08-10 645
1、在activated中使用, 关闭或者离开当前页则不调用了 data() { return { timer: null } } async activated() { await this.getQuery() this.getData(this.getQuery()) this.timer = setInterval(() => { this.getData(this.getQuery()) }, 1000) }, deactivated() { clearInterval
vue 生命周期钩子函数 和 watch activated deactivated
qq_44917015的博客
11-25 928
在这里插入代码片 <template> <div class="main" ref="main"> <!-- vue-baidu-map --> <!-- 钩子函数 --> </div> </template> <script> export default {
Vue父子组件生命周期与钩子函数详解
在父子组件交互中，父组件的生命周期通常先于子组件，例如在父组件的`created`或`mounted`中创建子组件，子组件的相应钩子则会在稍后调用。 在实际操作中，可以创建简单的Vue应用，通过打印日志或使用Vue DevTools...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值