浅谈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>
- 父组件改变props,子组件如果直接使用props,会触发子组件更新
- 父组件改变props,子组件如果将props放进data中再使用,不会触发子组件更新
- 父组件改变props,子组件如果将props放进computed中再使用,会触发子组件更新
- data,props和computed的变化都会触发组件更新
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。