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

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

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