mounted 生命周期和 keep-alive 中 activated 生命周期的优先级

结论先行:

在优先级上, mounted 生命周期高于 activated 生命周期。

当一个组件实例第一次被挂载时,mounted 生命周期会被触发。而 activated 生命周期是在组件从缓存中取出并且成功渲染到 DOM 之后才会被调用的。

因此,优先级上 mounted 生命周期高于activated 生命周期。

分析: 

在 Vue 中,mounted 生命周期是指一个组件被挂载到 DOM 中后触发的钩子函数。

而 keep-alive 是一个用来缓存组件的抽象组件,它自身没有任何展示效果,只是将内部包含的组件缓存起来,从而能够在需要时快速地切换到缓存的组件。当一个组件被 keep-alive 包裹时,那该组件就多了2个生命周期,分别是 activated 和 diactivated。

在 Vue 中,mounted 和 activated 生命周期函数都是组件被挂载到 DOM 上时自动执行的钩子函数。

不同的是,mounted 在每次组件挂载(或重新渲染)到 DOM 上时都会调用,而 activated 只在使用了 <keep-alive> 组件缓存时才会调用。

activated是在组件从缓存中取出并且成功渲染到DOM之后才会被调用的。

当一个组件第一次被挂载时,mounted 生命周期会被触发,同时 keep-alive 中的缓存组件还没有被渲染,因此 activated 生命周期并不会被触发。只有当一个被缓存的组件被激活后(比如从其他页面返回到该组件所在的页面),activated 生命周期才会被触发。

因此,优先级上 mounted 生命周期高于activated 生命周期。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值