Vue.js
<KeepAlive> in Vue.js
Preserve dynamic component state and manage cached instances with Vue's KeepAlive component.
0 views
- Caches Component Instances: Preserves the state of dynamic components by caching their instances in memory, preventing destruction when switched out.
- Prevents Re-rendering: Avoids re-rendering cached components, reducing performance overhead for complex or frequently toggled components.
- State Persistence: Maintains component state (e.g., form inputs, scroll positions) across switches, ensuring a seamless user experience.
- Dynamic Component Support: Works with the
<component :is="...">element to cache dynamically switched components. - Include/Exclude Props: Customizes caching behavior with
includeandexcludeprops, accepting comma-delimited strings, RegExp, or arrays to specify which components to cache or exclude based on theirnameoption. - Max Cache Limit: Limits the number of cached instances using the
maxprop, implementing a Least Recently Used (LRU) cache strategy to manage memory by removing the least recently accessed instance when the limit is exceeded. - Lifecycle Hooks: Supports
onActivated()andonDeactivated()(oractivatedanddeactivatedin Options API) to run code when a component is activated or deactivated, replacingmounted/unmountedfor cached components. - Abstract Component: Does not render a DOM element or appear as a component in the DOM, functioning as a virtual node (vnode) for caching.
- Router Integration: Can wrap
<router-view>to cache route components, preserving state when navigating between routes. - Conditional Caching: Requires components to have a
nameoption for conditional caching withinclude/excludeprops. - Memory Trade-off: Trades memory usage for performance by keeping components in memory, requiring careful use to avoid excessive memory consumption.
- No Manual Cache Deletion: Lacks a built-in method to manually clear specific cached instances, relying on LRU strategy or component destruction.