KeepAlive 缓存中组件在卸载时没有自动清理 'effect' (Components in KeepAlive cache did not automatically clear 'effect' during uninstallation)

[vs-moon]

Vue version

3.4.32

Link to minimal reproduction

https://play.vuejs.org/#eNqFVd1u3EQUfpWDhWRHMbsJ4SpsAk0VpAKiCFIhJN947dnsNPaMZY93U0WRWig0oWwT0qKSJq2goiTQhkZCVKFJ6Musdzdv0TNjr+Nsk/bOPn/znXO++WZBOxcEpUZMtHGtEjkhDQRERMTBpMWoH/BQwAKEpAaLUAu5DzqG6rnrE0KC89wPMl+p3DfIihhmMZfUKCMXA0E5i4wFiwE46OeMMBGNgzJAXkf+LVpscUimOpghwHYEbRDpVDkwIdEYuo4hHkGswhZxlFlFGBO0p4mcnfeoM4cuYwgmJtOjaA2MNKXUsD2M7iMYOCb1Ym7eELN9ouAB8SLypjQdm1etQIYw97xV/MdWZaeVcjp5nDn+COIHni2I+gOo1MfwSx42akJn+XZycLXz70pvaylZ3+7c2kqWniUru2BcDAgDUSdQDXkzIiGOmUXcI0OValjOCrxrQveb/5Ib+50fl4/W/k5Wb3Uf30xa/yTftzpPfktdYKRjU6ViITgDm7lAfZ+4FFF5V8BRAfasTVmx+pgJycrT9v6j7ubNZGk3x9be+0HCbu12713v/Lyb7NzFwI1f23vPoWkLpw7t/+937m4lO78km9tgfM1jcGyGLCQKBIv9KgkjCELKBHFxr8qctWfCFHHsGDcijboqqOPMqecBmaeRiJAQOMSymqL6zLr6ULUxYWkZUSwt62Nhoc+qD0DvvdhIvnvUPbiN8Lr719v7z8CYRhw4X9tRMLLVD+kwDnr3j33cz8nwT4ndwMBXwhcVPSrlFM8kThLkKJVR0u6ch9SCccocL3YJAh0gWw64kleFxju0dloklolOtafLq6iLqw7E/0q5QEHN1ESEw67R2dLliDPUCcV9S5OnUo+E2eW2tPw640Gex5sfK5u8lGbfjjNw5k6xX47mpc3SPg8JkrdBLC33CTucJYhVuqe//IzM43fu9Lkbexj9GucXBIkSS4xp2FTMXIRdiFNoLyhJo2x2JpqeF4RF/aYkUHWbVbylobTJCZ7V+jHcsdJ7fUHDKRal8XViy9kUqfGQXGI+j5kw00tiviLC758hr1KokIn941CIinLqyJqZXI4oe5MylzdLbwvqI6snJKALkuAoUEZBOVViqlrDw1jThNGRkbRCuQy9F+vtvb+6Gz8lq09Ql9p7rfbBvd7Dx0d3rnaeXjPhaP33o/sPRke6W2uoOmDM1GkEHl5PwvDQprytjAuoEnBJJEJ+hbgmXEKFjyI8BzEhehczkJMhnqlGYihI5qC8F4DCJCbnEu94xA7z1k60rTRC9qg0peTxWUP/iIcOyk0keHBiJsnBc6lr1zY7Ow+LjiH5JA2+Dycq5q/lVxI+7giGi2NN0/vrGqBBcRX5vJPWXu/wMFluHa39meysJhsPervfJjcOUWXzDaCle2c7S0vnXud8DvXI86o26ngtZqgKKIjFLUgvNl9VECBmFLmDJlsGKpynNjY+SF45krSdM584FB+XNvpKVh+dnEGZPH7uEe4xlVHFRzO9SnNOKtXiS3b+V+0=

Steps to reproduce

1, 打开浏览器控制台 (Open the browser console)
2, 点击按钮后立即再次点击 (Click the button and immediately click again)
3, 可以看到控制台上打印的数字, 因为 watch 依旧存在 (You can see the numbers printed on the console, Because the 'watch' still exists)

What is expected?

我以为 KeepAlive 缓存中组件在卸载前, 'effect' 能被自动处理 (I thought the 'effect' of components in KeepAlive cache could be automatically processed before uninstallation)

What is actually happening?

缓存组件的 effect 没有被自动处理 (The 'effect' of caching components has not been automatically processed)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i5-9300H CPU @ 2.40GHz
    Memory: 15.33 GB / 31.85 GB
  Binaries:
    Node: 20.15.1 - C:\Program Files\NodeJs\node.EXE
    Yarn: 1.22.22 - D:\Cache\NodeJs\NodeGlobal\yarn.CMD
    npm: 10.7.0 - C:\Program Files\NodeJs\npm.CMD
    pnpm: 9.5.0 - D:\Cache\NodeJs\NodeGlobal\pnpm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.102)
    Internet Explorer: 11.0.22621.3527

Any additional comments?

这个问题是我在了解 effectScope 时发现的, 在网上了解到单文件组件setup作用域内是会自动清除 effect 的, 但是第三方组件库编写就需要使用 effectScope , 再之后了解到了onScopeDispose, 之后我在编写生命周期相关的hook时发现, KeepAlive 缓存中的组件没有卸载周期的回调, 而且用 定时器 + watch 测试完发现 watch 的 effec 没有被清理, 不知道这是错的还是有意为之, 我看见官网写了onDeactivated 是替代 onBeforeUnmount 与 onUnmounted 的.

This issue was discovered when I was learning about effectoScope. I learned online that single file component setup automatically clears effects within its scope, but third-party component libraries require the use of effectoScope. Later, I learned about onScopeDispose. When I was writing lifecycle related hooks, I found that the components in KeepAlive cache did not have callback for uninstallation cycles, and after testing with timer+watch, I found that the effects of watch were not cleared. I don't know if this is wrong or intentional. I saw on the official website that onDeactivated is a replacement for onBeforeUnmount and onUnmount

[vs-moon]

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md#motivation

这个是关于setup作用域自动清除 effect 的介绍, 我理解为任何组件在 setup 作用域链内的 effect (watch, computed) 都是可自动清除的

This is an introduction to the automatic clearing of effects within the setup scope chain. I understand it as any component's effects (watch, computed) within the setup scope chain can be automatically cleared

[vs-moon]

如果是我理解错了, 请诸位谅解我的打扰 (第一次在 github 上提出疑惑问题)

If I misunderstood, please forgive my disturbance (this is my first time raising a question on GitHub)

[edison1105]

the underlying problem is that the keepalive component is not unmounted when include set to ""
duplicate of #11366