<keep-alive> doesn't `destroy` cached components after when max is 1

Version

2.6.10

Reproduction link

https://jsfiddle.net/p0te9vL3/

Steps to reproduce

1. Open dev tools to see console
2. Cycle through the routes
3. View console and observe lifecycle hook logging

What is expected?

I’d expect once the max cache is reached (in the example case of 1), the component that gets pruned also gets destroyed. In the documentation it states (emphasis mine):

max

The maximum number of component instances to cache. Once this number is reached, the cached component instance that was least recently accessed will be destroyed before creating a new instance.

What is actually happening?

The pruned component is never destroyed, it’s just removed from the cache. In the example, the beforeDestroy hook is never called.

---

Related code: https://github.com/vuejs/vue/blob/636c9b4ef17f2062720b677cbbe613f146f4d4db/src/core/components/keep-alive.js#L37-L49

[posva]

it will cache 1 component, so as soon as you switch the cache is occupied by the new component and the previous component is removed. A cache of one entry here is the same as not having any cache

[RichieChoo]

@zrh122 are you sure? I haven’t tested but the pr #10015 introduced a very small change that does not appear in yours. In any case, it would be nice if we could merge both for different issues, so both contributions are taken into account 🙂

Yes, in my code i delay to call pruneCacheEntry until component mounted or updated, at that time this._vnode is equal to variable vnode.

It may cause other problem, such as last router will fresh when activated