vue3 keepalive 子组件onActivated只执行一次
时间: 2023-12-09 21:05:32 浏览: 103
解决父组件将子组件作为弹窗调用只执行一次created的问题
在 Vue3 中,`<keep-alive>` 组件支持两个生命周期钩子函数 `onActivated` 和 `onDeactivated`,用于在组件被缓存并且再次被激活时执行相应的逻辑。如果子组件的 `onActivated` 只执行一次,可能是由于以下两个原因:
1. 子组件没有被缓存
`<keep-alive>` 组件只会缓存具有唯一 key 值的子组件,如果子组件没有设置 key 值,或者 key 值不唯一,子组件就不会被缓存。因此,确保子组件的 key 值唯一并且正确设置。
2. 子组件的状态没有发生变化
如果子组件的状态没有发生变化,即使子组件被缓存并且再次被激活,也不会触发 `onActivated` 钩子函数。因此,可以尝试在 `onMounted` 钩子函数中打印一些信息,查看子组件是否被正确渲染并且状态是否发生了变化。
另外,如果需要在每次子组件被激活时都执行相应逻辑,可以考虑在 `onBeforeRouteUpdate` 钩子函数中执行相应的逻辑,该钩子函数会在当前路由改变,但是组件被复用时调用。
阅读全文