This article mainly introduces a brief discussion of the impact of vue's props, data, and computed changes on component updates. Now I will share it with you and give you a reference.
This article introduces the impact of changes in vue's props, data, and computed on component updates. I would like to share it with you. Without further ado, let’s go directly to the code.
/** this is Parent.vue */
<template>
<p>
<p>{{'parent data : ' + parentData}}</p>
<p>{{'parent to children1 props : ' + parentToChildren1Props}}</p>
<p>{{'parent to children2 props : ' + parentToChildren2Props}}</p>
<p>
<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>
</p>
<my-children1 :children1Props="parentToChildren1Props" @changeParentToChildren1Props="changeParentToChildren1Props"></my-children1>
<my-children2 :children2Props="parentToChildren2Props" @changeParentToChildren2Props="changeParentToChildren2Props"></my-children2>
</p>
</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>
<p>
<p>{{'children1 data : ' + children1Data}}</p>
<p>{{'parent to children1 props : ' + children1Props}}</p>
<p>{{'parent to children1 props to data : ' + children1PropsData}}</p>
<p>
<el-button @click.native="changeChildren1Data">change children1 data</el-button>
<el-button @click.native="emitParentToChangeChildren1Props">emit parent to change children1 props</el-button>
</p>
</p>
</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>
<p>
<p>{{'children2 data : ' + children2Data}}</p>
<p>{{'parent to children2 props : ' + children2Props}}</p>
<p>{{'parent to children2 props to data : ' + children2PropsData}}</p>
<p>
<el-button @click.native="changeChildren2Data">change children2 data</el-button>
<el-button @click.native="emitParentToChangeChildren2Props">emit parent to change children2 props</el-button>
</p>
</p>
</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>Parent component Changing props. If a sub-component uses props directly, it will trigger an update of the sub-component.
The parent component changes props. If a sub-component puts props into data and then uses it, it will not trigger an update of the sub-component.
The parent component changes props, and if the sub-component puts the props into computed and then uses it, it will trigger the sub-component to update
data, props and Changes in computed will trigger component updates
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Use cheerio to make a simple web crawler in Node.js (detailed tutorial)
How to do it in vue Implement the parent component to pass multiple data to the child component
How to use Native in React to implement a custom pull-down refresh pull-up loaded list
How to achieve a similar Taobao star rating in vue
The above is the detailed content of Detailed answer: What impact do changes in Vue have on components?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
