Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When using Array.splice to modify the KeepAlive's prop "include", the component's onUnmounted hook does not trigger #11717

Closed
l123wx opened this issue Aug 26, 2024 · 10 comments · Fixed by #11718
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem scope: keep-alive

Comments

@l123wx
Copy link

l123wx commented Aug 26, 2024

Vue version

3.4.38

Link to minimal reproduction

playground

Steps to reproduce

  1. Open browser developer tools
  2. Click the "Clean keep alive include List" button, then the console will output the modified include
  3. Click the "About" button

What is expected?

Since Home has been removed from include, the onUnmounted hook of the Home component should be triggered

What is actually happening?

The onDeactivated hook of Home was triggered

System Info

System:
    OS: Windows 10 10.0.17763
    CPU: (8) x64 Intel(R) Core(TM) i5-8300H CPU @ 2.30GHz
    Memory: 4.44 GB / 15.88 GB
Binaries:
    Node: 18.19.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.7.1 - C:\Program Files\nodejs\pnpm.CMD
Browsers:
    Microsoft Edge: 127.0.2651.105

Any additional comments?

When the include variable is rendered on the page, everything will become normal again. This can be tested with the following steps:

  1. Reload the page
  2. Check the "showCacheList" option
  3. Click the "Clean keep alive include List" button
  4. Click the "About" button

This time, you can see that the onMounted hook of Home is triggered correctly.

@edison1105
Copy link
Member

Talk is cheap, show me the code.

@edison1105 edison1105 added need more info Further information is requested can't reproduce labels Aug 26, 2024
@l123wx
Copy link
Author

l123wx commented Aug 26, 2024

The code is here @edison1105

@edison1105
Copy link
Member

a workaround

:include="[...cacheList]"

@l123wx
Copy link
Author

l123wx commented Aug 26, 2024

Yes, it worked for me. And will this issue be fixed in the future?

@edison1105
Copy link
Member

@l123wx Yes, Let's keep this one open.

@edison1105 edison1105 added scope: keep-alive 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. and removed need more info Further information is requested can't reproduce labels Aug 26, 2024
@l123wx
Copy link
Author

l123wx commented Aug 26, 2024

Okay, thanks.

@edison1105 edison1105 added the has workaround A workaround has been found to avoid the problem label Aug 27, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Sep 13, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem scope: keep-alive
Projects
None yet
5 participants
@edison1105 @l123wx and others