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

本文介绍了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> 

父组件改变props，子组件如果直接使用props，会触发子组件更新
父组件改变props，子组件如果将props放进data中再使用，不会触发子组件更新
父组件改变props，子组件如果将props放进computed中再使用，会触发子组件更新
data，props和computed的变化都会触发组件更新

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。