KeepAlive Cache or Forced Remount for Vue 3 Route Forms
0 reputation · 19 Dec 2023, 18:44 UTC
Goal
Preserve unsaved form input across route navigation in Vue 3 with Vue Router 4 while preventing cached instances from growing unbounded in memory.
Constraint
<KeepAlive include="Form"> retains deactivated instances and reactive state in RAM, but timers, listeners, and third-party subscriptions are not cleared automatically; activated and deactivated replace onUnmounted for cleanup. Forced remount with :key="$route.fullPath" destroys the instance and frees memory, yet resets local state unless drafts are manually persisted.
Open decision
Which approach fits repeated navigation through many form instances under a fixed memory budget, and how should cleanup be divided when a component may be cached or remounted?
Does <KeepAlive> with max reliably bound memory for route-scoped forms, or is forced remount safer for long sessions?
Should subscription cleanup live in deactivated, onBeforeUnmount, or both when the same component is cached under <KeepAlive> on some routes and keyed for remount on others?
Can unsaved input survive a forced remount without external storage, and does that change the trade-off against <KeepAlive>?
