Props change will not trigger child component update if props not referred in template

[RephoneYin]

Version

2.2.6

Reproduction link

https://jsbin.com/pusozum/edit?html,js,console,output

Steps to reproduce

Please check minimal reproduction:
2 components which are parent and child, parent pass props to child.
Child component will not update if the props is not referred in its template.

What is expected?

Child component trigger its updated hook.

What is actually happening?

Child component never trigger its updated hook

[yyx990803]

updated hook means the component did a re-render. If the prop is never used during render, why would you expect the component to re-render when it changes?

Put it another way: you are misunderstanding what updated should be used for.

[zhopon]

You should use watch for this, as it's not dependent on whether the component was re-rendered or not.

[aboutqx]

But when it's used in v-if,still not trigger changes.

[aboutqx]

oh,i made a mistake ,it actually works.

[adamreisnz]

Coming from Angular, I also bumped into this. Angular's $onChanges hook fires whenever data is changed. There doesn't appear to be such a hook in Vue, and you have to create watches instead for each of the properties you want to watch for changes.

The update hook in Vue as mentioned above is only triggered when the component is re-rendered.

It'd be great if we could get a similar hook like in Angular, which triggers whenever any data is changed, with a changes hash to inspect the changes if needed. Would prevent code duplication if you're needing to watch 3 or 4 different properties with the same handler.

[posva]

In vue you the way to go would be to watch specific data or props to trigger side actions. It's very rare to need to watch the whole data tree to trigger a side effect, if it is, you should revisit the strategy you are using to see if it could be data-oriented instead (most of the time it is).
However, it's possible to observe data and props updates by doing this.$watch('$data', handler, { deep: true }) or this.$watch('$props', handler, { deep: true })

[adamchenwei]

just go to ReactJS already. I am having enough of this state not changning mess in Vuejs. The positive part, its a bit less horrible than AngularJS.

[tettoffensive]

Could someone post the solution to the jsbin? I'm having trouble discerning exactly what the answer is. Where do you watch for $props? in the parent or in the child?

[sirlancelot]

@tettoffensive Several options are available to you. Suppose you have a prop named "message":

https://vuejs.org/v2/api/#watch

export default {
  watch: {
    message(value, previousValue) {
      debugger
    }
  }
}

Or imperatively (for instance in a created() hook):

https://vuejs.org/v2/api/#vm-watch

this.$watch("message", (value, previousValue) => {
  debugger
})

If you're coming from Angular or React, you may have been confused as to why updated() doesn't fire when props change. The reason is that updated() is fired only when the DOM was updated. The documentation for updated() makes this very clear. Vue efficiently re-uses the existing DOM if nothing it depends on has changed.

For further questions, please use Discord or the Forums. Thanks!

[cpphen]

I am also having a similar issue. Is it normal to have watchers to update local component data() on prop changes. I am coming from React, and component will re-render every time props passed to component are updated. The code I am working on is set up using the extend API.

const myInput = {
   props: ['date'],
   data() {
   	inputDate: this.date /*I want inputDate to have default value of props passed in. When
   	                The date prop updates, it will not re-render but I can see in my
   			Vue dev tools that the prop is indeed updated. I initially did
   			not have a `watcher` for date props but after adding it, it updates.*/
   },
   watch: { /*Adding this watcher updates inputDate. Why do I need this? 
I assumed prop changes would re-render similar to React*/
   	date(newVal, oldVal) { 
   		if (newVal !== oldVal)
   			this.inputDate = newVal
   	}
   },
   template: `
   	<input v-model = "inputDate" />
   `
}

const containerOne = Vue.extend({
	methods: {
		methodToUpdateItems() {
			... /*The code here uses an external code outside of Vue. 
We are converting an old framework to Vue and use one of the legacy 
controller functions to update the model for the old framework. This model is 
assigned to is in our Vuex store and Items gets the array in this component */
		}
	},
	data() {
		items: this.$store.getters.items //array of dates
	}
	...
	...
});

const containerTwo = containerOne.extend({
	...
	template: `
		...
		<table v-for="(item, index) in items">
		 <myInput date="item" />
		 ...
		</table>
	`,
	components: {
		myInput
	}
});

[kenghot]

this works for me:

////////////////////////
===>template id='k-evaluate'>

<v-card-text>
    <v-row>
        <v-col cols="11">
            {{title}}
        </v-col>
        <v-col cols="1">

            <v-row>
                <v-switch v-model="obj[fld]" color="green" inset></v-switch>
            </v-row>
            <v-row>
                {{passText}}
            </v-row>
        </v-col>
    </v-row>

</v-card-text>

==> end template
===> div id="appEvaluate"

        <v-list-item>
            <v-list-item-content>
                <v-list-item-title class="h2">กรณีองค์กรภาคเอกชนหรือองค์กรของผู้สูงอายุที่จดทะเบียนเป็นนิติบุคคล หรือ ได้รับการรับรองเป็นองค์กรสาธารณประโยชน์ตามกฎหมายว่าด้วยการส่งเสริมการจัดสวัสดิการสังคม</v-list-item-title>

            </v-list-item-content>
        </v-list-item>
        <k-evaluate ref="ref1" :obj="result" fld="sw1" title="(ก) มีอำนาจหน้าที่เกี่ยวกับการคุ้มครอง การส่งเสริม และการสนับสนุนผู้สูงอายุ">

        </k-evaluate>

     
    </v-card>
</v-app>

Vue.component('k-evaluate', {
template: '#k-evaluate',
props: ['title','obj','fld'],
data() {
return {
myPass: this.obj[this.fld]
}
},
computed: {
passText: function () {
return this.myPass ? "ผ่าน" : "ไม่ผ่าน"
}
},

})
var VueEvaluate = new Vue({
el: '#appEvaluate',
vuetify: new Vuetify(),
data() {
return {
result: {
sw1_1: false,
sw1_2: false,
sw2_1: false,
sw2_2: false,
sw2_3: false,
sw2_4: false,
sw2_5: false,
}
}
},
})