Introduction to the influence of vue's props, data, and computed changes on Component updates, propscomputed

Introduction to the influence of vue's props, data, and computed changes on Component updates, propscomputed

This article describes the impact of vue's props, data, and computed changes on Component updates.

/** this is Parent.vue */<template> <div>  <div>{{'parent data : ' + parentData}}</div>  <div>{{'parent to children1 props : ' + parentToChildren1Props}}</div>  <div>{{'parent to children2 props : ' + parentToChildren2Props}}</div>  <div>   <el-button @click="changeParentData">change parent data</el-button>   <el-button @click="changeParentToChildren1Props">change parent to children1 data</el-button>   <el-button @click="changeParentToChildren2Props">change parent to children2 data</el-button>  </div>  <my-children1 :children1Props="parentToChildren1Props" @changeParentToChildren1Props="changeParentToChildren1Props"></my-children1>  <my-children2 :children2Props="parentToChildren2Props" @changeParentToChildren2Props="changeParentToChildren2Props"></my-children2> </div></template><script> 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  } }</script> 

/** this is Children1.vue */<template> <div>  <div>{{'children1 data : ' + children1Data}}</div>  <div>{{'parent to children1 props : ' + children1Props}}</div>  <div>{{'parent to children1 props to data : ' + children1PropsData}}</div>  <div>   <el-button @click.native="changeChildren1Data">change children1 data</el-button>   <el-button @click.native="emitParentToChangeChildren1Props">emit parent to change children1 props</el-button>  </div> </div></template><script> 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');   }  } }</script> 

/** this is Children2.vue */<template> <div>  <div>{{'children2 data : ' + children2Data}}</div>  <div>{{'parent to children2 props : ' + children2Props}}</div>  <div>{{'parent to children2 props to data : ' + children2PropsData}}</div>  <div>   <el-button @click.native="changeChildren2Data">change children2 data</el-button>   <el-button @click.native="emitParentToChangeChildren2Props">emit parent to change children2 props</el-button>  </div> </div></template><script> 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');   }  } }</script> 

1. The parent Component Changes props. If the child component uses props directly, the child component update is triggered.
2. The parent Component Changes props. If the child component puts props into data before use, the child component update will not be triggered.
3. The parent Component Changes props. If the child component puts props into computed and then uses it, the child component update will be triggered.
4. Changes in data, props, and computed will trigger component updates.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.