Subscribe on changes!

Component in keep alive receives `activated` event when being `deactivated`

avatar
Jan 25th 2022

Version

3.2.29

Reproduction link

code : github.com demo : netlify.com

Steps to reproduce

  1. Click https://vue-3-keep-alive-lifecycle.netlify.app/
  2. Open devtools, console tab.
  3. Click About link.
  4. Clear console.
  5. Click Home link.

What is expected?

Since it's being deactivated NestedAbout component should not receive the activated lifecycle event

What is actually happening?

NestedAbout component is receiving the activated lifecycle event


We can also notice that NestedHome is mounted twice, as reported here: https://github.com/vuejs/router/issues/626#issuecomment-1004182965

avatar
Feb 9th 2022

Can you create a reproduction without the router? This will help to move forward. You can use this playground as a starting point

avatar
Feb 10th 2022

Hello @posva,

I can't reproduce the bug without vue-router (activated event is not called on deactivated component anymore) I let you check if my repro is valid, but I think this issue can be moved to the vue-router repository. SFC playground

avatar
Feb 10th 2022

The repro is not exactly the same because, in Vue Router, nested components are dynamic and keep rendering (cf the issue you linked) which is why they get activated/deactivated, the nested children are rendered twice. It's similar (but not exactly the same) as this

Let's close this in favor of https://github.com/vuejs/core/issues/5386 because solving that would solve this too.