nuxt
keep-alive calls unmount a component when I change a page but does not call mount when I return back
Environment
Nuxt Version: 3.0.0
Reproduction
https://github.com/dxvladislavvolkov/keepalive
npm i npm run dev Click on page 1 then page 3 (you will see mounted text in the console ) then page 4 (you will see unmounted in the console) then page 3 - the component doesn't call mounеed even though the unmounted hook was called
We have a problem with devextreme-vue components because they clean all content on the unmounted hook. And components need mounted hook to be called
Describe the bug
We have a problem with devextreme-vue components because they clean all content on the unmounted hook. And components need mounted hook to be called
Additional context
No response
Logs
No response
I think that no onUnmounted should be called here at all, but only onDeactivated.
I went down the rabbit hole a little deeper. It looks like the problem is occurring because the onUnmounted lifecycle hook is not matching KeepAlive.
KeepAlive removes the least recently accessed cached instance, but the onUnmounted lifecycle hook is called for the instance in the cache that was last accessed. Because of this, there is now a mismatch between the cached instances and the actual components.
In @dxvladislavvolkov's example, you can see this behavior if you click on Page 3, refresh the browser, and than click Page 1, Page 2, Page 4 and Page 5. If you never click on page 3 again, you will never see the onUnmounted hook from page 3.
I've been trying to find the Nuxt code for this, but have absolutely no idea where to start 🫤
I’ve figured out that …
definePageMeta({
keepalive: true
});
… inside a page component does not work.
It only works by setting the [keepalive] attribute to the <NuxtPage> component in the app.vue.
Seems like there is a bug.
After testing, I believe this issue has been fixed with commit 1fde49c0f57cc50fedf91366a274c9759d1d9a39 in VueJS (>= 3.2.46).
VueJs now checkes for the VNode type + key instead of only the VNode type.