本文介绍了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制作简单的网页爬虫（详细教程）
在vue中如何实现父组件向子组件传递多个数据
在react中使用native如何实现自定义下拉刷新上拉加载的列表
在vue中如何解决无法动态修改jqgrid组件 url地址的问题
在vue中如何实现类似淘宝星级评分
以上就是详细解答vue的变化对组件有什么影响？的详细内容。