Unneccessary computed recalculations in dev mode, not present in production
Vue version
3.2.47
Link to minimal reproduction
https://github.com/veodko/computed-bug
Steps to reproduce
Clone the repo, run npm install
and then npm run dev
. Change the selected value and observe the console logs.
Now run npm run build
then npm run preview
and do the same.
What is expected?
Since the items
prop of SelectWrapper
is static and remains unchanged, the computation should happen only once.
What is actually happening?
The computation is re-calculated each time the modelValue
prop changes. Same happens if using watch
on props.items
instead of computed
(see SelectWrapper.vue
)
System Info
No response
Any additional comments?
What is interesting is that I could not reproduce this issue on Vue playground when switching between dev and prod. I don't know if this is intended behaviour or a bug, but it caused me a lot of trouble searching for why something was re-calculating all the time even though it shouldn't. I couldn't find any similar reports or issues but if this is intended I'd like to understand why is there such a difference.
Out of curiosity, I tried updating the example repo to newest Vue 3.4.19 after reading about some reactivity improvements in #5912
but I need to say that this inconsistency still appears exactly as it was before, the computed value behaves differently in the built app than in dev.
In fact, building the app with vite build --mode=development
actually behaves the same way as production, computed gets called only once. Seems this is only happening in the dev server of vite