浅谈vue的props，data，computed变化对组件更新的影响

/** 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>