浅谈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> 

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

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