Shulou(Shulou.com)06/03 Report--

This article will explain in detail about the impact of props,data,computed changes in vue on component updates. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Code:

/ * * this is Parent.vue * / {{'parent data:' + parentData}} {{'parent to children1 props:' + parentToChildren1Props}} {{'parent to children2 props:' + parentToChildren2Props}} change parent data change parent to children1 data change parent to children2 data import Children1 from'. / Children1'; import Children2 from'. / Children2' Export default {name: 'parent', data () {return {parentData:' ParentData', parentToChildren1Props: 'ParentToChildren1Props', parentToChildren2Props:' ParentToChildren2Props'}}, beforeCreate: function () {console.log ('* this is parent beforeCreate*');}, created: function () {console.log ('# this is parent created#') }, beforeMount: function () {console.log ('- this is parent beforeMount-');}, mounted: function () {console.log ('+ this is parent mounted+');}, beforeUpdate: function () {console.log ('& this is parent beforeUpdate&');}, updated: function () {console.log ('$this is parent updated$') }, methods: {changeParentData: function () {this.parentData = 'changeParentData'}, changeParentToChildren1Props: function () {this.parentToChildren1Props =' changeParentToChildren1Props'}, changeParentToChildren2Props: function () {this.parentToChildren2Props = 'changeParentToChildren2Props'}}, components: {' my-children1': Children1 'my-children2': Children2}} / * * this is Children1.vue * / {{' children1 data:'+ children1Data}} {{'parent to children1 props:' + children1Props}} {{'parent to children1 props to data:' + children1PropsData}} change children1 data emit parent to change children1 props export default {name: 'children1', props: [' children1Props'], data () {return {children1Data: 'Children1Data'}} Computed: {children1PropsData: function () {return this.children1Props}}, beforeCreate: function () {console.log ('* this is children1 beforeCreate*') }, created: function () {console.log ('# this is children1 created#');}, beforeMount: function () {console.log ('- this is children1 beforeMount-');}, mounted: function () {console.log ('+ this is children1 mounted+') }, beforeUpdate: function () {console.log ('& this is children1 beforeUpdate&');}, updated: function () {console.log ('$this is children1 updated$');}, methods: {changeChildren1Data: function () {this.children1Data = 'changeChildren1Data'}, emitParentToChangeChildren1Props: function () {console.log (' emitParentToChangeChildren1Props'); this.$emit ('changeParentToChildren1Props') } / * * this is Children2.vue * / {{'children2 data:' + children2Data}} {{'parent to children2 props:' + children2Props}} {{'parent to children2 props to data:' + children2PropsData}} change children2 data emit parent to change children2 props export default {name: 'children2', props: [' children2Props'], data () {return {children2Data: 'Children2Data', children2PropsData: this.children2Props}} BeforeCreate: function () {console.log ('* this is children2 beforeCreate*') }, created: function () {console.log ('# this is children2 created#');}, beforeMount: function () {console.log ('- this is children2 beforeMount-');}, mounted: function () {console.log ('+ this is children2 mounted+') }, beforeUpdate: function () {console.log ('& this is children2 beforeUpdate&');}, updated: function () {console.log ('$this is children2 updated$');}, methods: {changeChildren2Data: function () {this.children2Data = 'changeChildren2Data'}, emitParentToChangeChildren2Props: function () {this.$emit (' changeParentToChildren2Props');}

The parent component changes the props. If the child component uses props directly, it will trigger the child component update.

The parent component changes the props. If the child component puts the props into the data and then uses it, it will not trigger the child component update.

The parent component changes the props, and if the child component puts the props into the computed and then uses it, it will trigger the child component update.

Changes in data,props and computed trigger component updates

On "what is the impact of props,data,computed changes in vue on component updates" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.