You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Create a new project with the Vue 2 migration build
Create an array with object elements (e.g. [{foo: 0}, {foo: 1}]) and add a watch on it
Replace the array (arr = [...arr])
Mutate the array (arr.push({foo: 2}))
Modify the contents of one of the elements (arr[0].foo++)
What is expected?
The watch should be triggered when the array is replaced or mutated, but should not be triggered when the contents of the array elements are modified (Vue 2 repro)
What is actually happening?
The watch is triggered in all three cases, on replacement, mutation, and deep modification
System Info
No response
Any additional comments?
The compat is implemented here in createWatcher, and it's implemented by doing a deep traversal of array values. The Vue 2 behavior can be reproduced by instead calling array.slice(0, 0) there, which creates a reactive dependency on TrackOpTypes.ITERATE. The internal shallowReadArray function may also be more appropriate to call in internal code.
The text was updated successfully, but these errors were encountered:
It could arguably be considered an undocumented breaking change, however it's a very impactful breaking change which has a relatively easy fix, so I'd consider it less "bug" and more "oversight."
Unfortunately the migration path isn't so easy for a user updating past the migration build, so documenting it in the deprecation message might be cumbersome. (The best solutions I've come up with involve a computed property calling slice and returning either {} or new Proxy(arr, {}) so the object reference changes each time it's recomputed)
Vue version
3.4.38 (compat)
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-cpcesj?file=src%2FApp.vue
Steps to reproduce
[{foo: 0}, {foo: 1}]
) and add a watch on itarr = [...arr]
)arr.push({foo: 2})
)arr[0].foo++
)What is expected?
The watch should be triggered when the array is replaced or mutated, but should not be triggered when the contents of the array elements are modified (Vue 2 repro)
What is actually happening?
The watch is triggered in all three cases, on replacement, mutation, and deep modification
System Info
No response
Any additional comments?
The compat is implemented here in createWatcher, and it's implemented by doing a deep traversal of array values. The Vue 2 behavior can be reproduced by instead calling
array.slice(0, 0)
there, which creates a reactive dependency onTrackOpTypes.ITERATE
. The internal shallowReadArray function may also be more appropriate to call in internal code.The text was updated successfully, but these errors were encountered: