perf(runtime-vapor): cache dynamic prop/attr and slot function sources using computed to prevent redundant calls. #14178
+184
−26
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…s using computed to prevent redundant calls.
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-sfc
@vue/compiler-ssr
@vue/compiler-vapor
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/runtime-vapor
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
There was a problem hiding this comment.
Pull request overview
This PR optimizes the runtime-vapor module by implementing computed-based caching for dynamic prop/attr and slot function sources to prevent redundant function calls when components access multiple props/attrs from the same v-bind source.
Key Changes:
- Introduced
resolveFunctionSourcehelper that wraps function sources in computed refs for automatic caching - Unified caching logic between props and slots by making
resolveFunctionSourcea shared utility - Added comprehensive test coverage verifying cache behavior and reactivity
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/runtime-vapor/src/componentProps.ts | Added resolveFunctionSource helper with computed-based caching; updated resolveSource and all dynamic source resolution to use the new caching mechanism |
| packages/runtime-vapor/src/componentSlots.ts | Removed duplicate resolveDynamicSlot function; now imports and uses shared resolveFunctionSource from componentProps |
| packages/runtime-vapor/tests/componentProps.spec.ts | Added comprehensive test suite for dynamic props source caching, covering multiple access patterns, reactivity, and mixed static/dynamic scenarios |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+49
to
+55
| export function resolveFunctionSource<T>( | ||
| source: (() => T) & { _cache?: ComputedRef<T> }, | ||
| ): T { | ||
| if (!source._cache) { | ||
| source._cache = computed(source) | ||
| } | ||
| return source._cache.value |
There was a problem hiding this comment.
The resolveFunctionSource function mutates the input function by attaching a _cache property. This could cause unexpected behavior if:
- The same function is used in multiple contexts or components - they would share the same cached computed ref
- Functions are dynamically created in loops or conditionals - the cache would persist even after the function is no longer needed, potentially causing memory leaks
Consider:
- Adding a WeakMap-based cache instead of mutating the function object
- Documenting this behavior clearly if it's intentional
- Ensuring function sources are stable references (not recreated on each render)
Suggested change
| export function resolveFunctionSource<T>( | |
| source: (() => T) & { _cache?: ComputedRef<T> }, | |
| ): T { | |
| if (!source._cache) { | |
| source._cache = computed(source) | |
| } | |
| return source._cache.value | |
| const functionSourceCache: WeakMap<Function, ComputedRef<any>> = new WeakMap(); | |
| export function resolveFunctionSource<T>( | |
| source: () => T, | |
| ): T { | |
| let cache = functionSourceCache.get(source); | |
| if (!cache) { | |
| cache = computed(source); | |
| functionSourceCache.set(source, cache); | |
| } | |
| return cache.value; |
| } | ||
|
|
||
| /** | ||
| * Resolve a function source with computed caching. |
There was a problem hiding this comment.
The documentation comment is incomplete. It should explain:
- What "computed caching" means in this context
- That the cache is stored on the function object itself via a
_cacheproperty - The implications of this approach (e.g., functions should be stable references)
- When the cache is invalidated (when the computed's dependencies change)
Example:
/**
* Resolve a function source with computed caching.
*
* Wraps the source function in a computed ref to cache its result.
* The cache is stored directly on the function object via a `_cache` property,
* so the same function reference will always use the same cache.
* The cached value will be recomputed when the function's reactive dependencies change.
*
* @param source - The function to resolve, must return a value of type T
* @returns The cached result of calling the source function
*/
Suggested change
| * Resolve a function source with computed caching. | |
| * Resolve a function source with computed caching. | |
| * | |
| * Wraps the source function in a computed ref to cache its result. | |
| * The cache is stored directly on the function object via a `_cache` property, | |
| * so the same function reference will always use the same cache. | |
| * The cached value will be recomputed when the function's reactive dependencies change. | |
| * This approach requires that the function reference remains stable; if a new function | |
| * is passed, a new cache will be created and the previous cache will not be reused. | |
| * | |
| * @param source - The function to resolve, must return a value of type T | |
| * @returns The cached result of calling the source function |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.