欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 17:17:30
本文介绍了vue的props,data,computed变化对组件更新的影响,分享给大家,废话不多说,直接上代码 /** this is parent.vue *...

本文介绍了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的变化都会触发组件更新

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