详细解答vue的变化对组件有什么影响？
程序员文章站
2022-04-13 22:39:30
...
本篇文章主要介绍了浅谈vue的props，data，computed变化对组件更新的影响，现在分享给大家，也给大家做个参考。
本文介绍了vue的props，data，computed变化对组件更新的影响，分享给大家，废话不多说，直接上代码
/** 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>
父组件改变props，子组件如果直接使用props，会触发子组件更新
父组件改变props，子组件如果将props放进data中再使用，不会触发子组件更新
父组件改变props，子组件如果将props放进computed中再使用，会触发子组件更新
data，props和computed的变化都会触发组件更新
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在Node.js中使用cheerio制作简单的网页爬虫（详细教程）
在React中使用Native如何实现自定义下拉刷新上拉加载的列表
在vue中如何解决无法动态修改jqgrid组件 url地址的问题
以上就是详细解答vue的变化对组件有什么影响？的详细内容，更多请关注其它相关文章！