fix(toRefs): don't trigger unwanted watchEffects #3260
Merged
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.
Before submitting the PR, please make sure you do the following
fixes #123
).Description
This one is hard to tackle because of #885. The functionality here is kind of exclusive with the bug that this PR aims to fix.
This PR introduces
ToRefsOptions
property with areplaceRef
boolean flag. By default, the flag is set totrue
to prevent breaking changes. IfreplaceRef
is true, and one of the returnedtoRefs
ref is changed, the original ref object is replaced by a copy. If the flag is set to false, only a key of the original ref is updated.fixes #3258
Additional context
I couldn't come up with a better name. Maybe
deep
would better resemble that.Another solution that I thought of would be to check if
objectRef.constructor.name === 'RefImpl'
and if so, update only the key. Vue has no system (that I know of) of distinguishing betweenRef
,ComputedRef
andCustomRef
, so that solution seems a bit hacky and is prone to changes of Vue internals. Also it makestoRefs
kind of unpredictable when used with other composables.🤖 Generated by Copilot at 59632ac
Added a new feature to the
toRefs
function to optionally replace the original ref with a copy on property update. This can help avoid unwanted side effects when usingtoRefs
with reactive objects. Updated the tests and the documentation accordingly.🤖 Generated by Copilot at 59632ac
ToRefsOptions
interface to define the type of the optional parameter for thetoRefs
function (link)toRefs
function signature to accept anoptions
parameter with a default value of an empty object (link)options
parameter and assign a default value of true to thereplaceRef
variable (link)set
function of the computed property to check the value of thereplaceRef
variable and either replace the original ref with a copy or mutate it directly on property update (link)watchSyncEffect
function fromvue-demi
intoRefs/index.test.ts
(link)toRefs
function with different values of thereplaceRef
option (link)