A custom KeepAlive component for Vue 3 that doesn't depend on Vue's built-in KeepAlive
npm install yzskeepaliveA custom KeepAlive component for Vue 3 that doesn't depend on Vue's built-in KeepAlive component.
- ✅ Component instance caching and state preservation
- ✅ onActivated/onDeactivated lifecycle hooks
- ✅ Include/Exclude pattern matching
- ✅ Max cache limit with LRU eviction policy
- ✅ No dependency on Vue's built-in KeepAlive
- ✅ Full TypeScript support
``bash`
npm install yzskeepalive
`vue
`
`vue`
`vue`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| include | string \| RegExp \| Array | undefined | Only cache components matching these patterns |
| exclude | string \| RegExp \| Array | undefined | Don't cache components matching these patterns |
| max | number | 10 | Maximum number of component instances to cache |
| Event | Description |
|-------|-------------|
| activated | Emitted when a component is activated |
| deactivated | Emitted when a component is deactivated |
| Method | Description |
|--------|-------------|
| clearCache() | Clear all cached components |
| pruneCache(filter) | Remove cached components matching the filter function |
| getCachedKeys() | Get all cache keys |
| getCacheSize() | Get current cache size |
- useKeepAlive(): Provides onActivated and onDeactivated hooksuseKeepAliveState()
- : Provides isActive reactive stateuseShouldCache()
- : Utility to check if a component should be cached
This library implements a custom caching mechanism that:
1. Caches Component Instances: Uses an LRU cache to store component instances
2. Preserves State: Saves and restores component state between activations
3. Lifecycle Hooks: Provides custom onActivated and onDeactivated` hooks
4. Pattern Matching: Supports include/exclude patterns for fine-grained control
5. Memory Management: Automatically evicts least recently used components when cache limit is reached
- Vue 3.0+
- Modern browsers (Chrome, Firefox, Safari, Edge)
MIT