keep-alive doesn't call $destroy if view is actived

[StarHosea]

Version

2.5.13

Reproduction link

https://jsfiddle.net/50wL7mdz/94716/

Steps to reproduce

1. navigate to page-a to make keep-alive to cache page-a component
2. navigate to page-b to make keep-alive to cache page-b component
3. now, if remove cache of page-a, page-a was destroyed correctly,
   if navigate back to page-a and remove cache of page-b ,page-b was not destroyed

What is expected?

page-b was destroyed

What is actually happening?

page-b was was not destroyed

---

https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js#L44

[javoski]

const PageB = Vue.component('PageB', {
 name:'page-b',
  template: '<div>PageB</div>',
  beforeDestroy(){
       console.log("PageA was destroyed"); // Should be 'PageB' here 😂
  }
});

And it's working as expected according to my tests.

[codebryo]

Just verified. Yes. It seems to work as intended. I think it's the typo @javoski pointed out.
I'd recommend closing this issue.

[fnlctrl]

It wasn't the typo. page-b was still not destroyed even when cachedPage is empty (https://jsfiddle.net/z1c65x8r/)
(Forgot to leave a comment last time I tried to dig into this issue 😂 )

[codebryo]

@fnlctrl when I tried the fiddle you posted I saw PageB was destroyed in the console. So when digging a little deeper and keeping clear watch of the cached array, the issue is actually not related to Vue. If you click on Page B multiple times, you will have multiple cached versions of it in the cache. Vue actually tracks that the element is still not completely destroyed.

In the Screenshot above, you can see multiple versions of page-b living in the array. If I try to empty the cache repeatedly till all page-b are gone it also throws the $destroyed function accordingly.

You might want to use a Set instead of an array as it prevents duplicates.