text book optimization - props used only in JavaScript component section failed reactivity

kotiel commented 3 years ago

Version

4.5.6

Reproduction link

[no link](no link)

Environment info

linux Archlinux
pacman -Su done everyday, always running latest nodejs npm vue/cli
this issue occurred as latest update vue/cli to 4.5.6 is done

Steps to reproduce

Two Vuex store's modules are used - one for UI and one for Database to trigger component swap/refresh before vue/cli 4.5.6 it was working fine, now the prop "reset" doesn't trigger reactivity (reset Vuetify slider). Prop "reset" is used only in the JavaScript section of the component - inside "beforeUpdate" and "updated" component hook. With vue/cli 4.5.6 if prop reset is added to the template the component behaves as before with reactivity.

Can you please explain why you removed reactivity when props are used in JavaScript section only of a component?

Thanks K.

keep-alive component :is="getUIbz" :reset="og01Vdbreset" /component /keep-alive

getUIbz: state => state.uibz.compbz[state.uibz.currbz] og01Vdbreset: state => state.net.reset

What is expected?

Two Vuex store's modules are used - one for UI and one for Database to trigger component swap/refresh before vue/cli 4.5.6 it was working fine, now the prop "reset" doesn't trigger reactivity (to reset Vuetify slider). Prop "reset" is used only in the JavaScript section of the component - inside "beforeUpdate" and "updated" component hook. With vue/cli 4.5.6 if prop reset is added to the template {{ reset }} the component behaves as before with reactivity.

keep-alive component :is="getUIbz" :reset="og01Vdbreset" /component /keep-alive

getUIbz: state => state.uibz.compbz[state.uibz.currbz] og01Vdbreset: state => state.net.reset

What is actually happening?

Two Vuex store's modules are used - one for UI and one for Database to trigger component swap/refresh before vue/cli 4.5.6 it was working fine, now the prop "reset" doesn't trigger reactivity (to reset Vuetify slider). Prop "reset" is used only in the JavaScript section of the component - inside "beforeUpdate" and "updated" component hook. With vue/cli 4.5.6 if prop reset is added to the template {{ reset }} the component behaves as before with reactivity.

sodatea commented 3 years ago

Thanks for submitting this issue! Due to our limited time, we ask you to include a reproduction link to a minimal full reproduction of your problem (for example in a GitHub repository) so we can find what is causing the issue. Thank you for your understanding!

kotiel commented 3 years ago

Hi Sodatea

Thanks, with Vue devtools it's simple to reproduce. Using a Vuex store - state variable "reset" add a getter to return its value and call this getter at the component creation :reset="getter" - reset is a prop of the component. In the beforeUpdate component hook add a console.log with a this.reset - IF test to console.log. If the component use {{ reset }} in the template part of the component, call of the beforeUpdate hook is done - expected behaviour. Remove the {{ reset }} (reset still is a prop) but leave the this.reset test in the beforeUpdate hook and change the reset value in the store with the Vue devtools, you'll notice than the beforeUpdate is not call. Before update to vue cli 4.5.6 both situations was working - beforeUpdate was called. I'll try to give access to my Vue app with NGROK - not sure yet due to socket.io and postgresql usage. (test with npm run serve)

Regards K.

sodatea commented 3 years ago

I'm sorry but I need actual code to debug. And actually, from the description, it seems not much related to Vue CLI? Maybe it's also reproducible without a CLI?

vuejs / vue-cli