详细解答vue的变化对组件有什么影响？

本篇文章主要介绍了浅谈vue的props，data，computed变化对组件更新的影响，现在分享给大家，也给大家做个参考。

本文介绍了vue的props，data，computed变化对组件更新的影响，分享给大家，废话不多说，直接上代码

/** this is Parent.vue */
<template>
 <p>
  <p>{{&#39;parent data : &#39; + parentData}}</p>
  <p>{{&#39;parent to children1 props : &#39; + parentToChildren1Props}}</p>
  <p>{{&#39;parent to children2 props : &#39; + 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 &#39;./Children1&#39;;
 import Children2 from &#39;./Children2&#39;;
 export default{
  name: &#39;parent&#39;,
  data() {
   return {
    parentData: &#39;ParentData&#39;,
    parentToChildren1Props: &#39;ParentToChildren1Props&#39;,
    parentToChildren2Props: &#39;ParentToChildren2Props&#39;
   }

  },

  beforeCreate: function() {
   console.log(&#39;*******this is parent beforeCreate*********&#39;);

  },

  created: function() {
   console.log(&#39;######this is parent created######&#39;);

  },

  beforeMount: function() {
   console.log(&#39;------this is parent beforeMount------&#39;);

  },

  mounted: function() {
   console.log(&#39;++++++this is parent mounted++++++++&#39;);

  },

  beforeUpdate: function() {
   console.log(&#39;&&&&&&&&this is parent beforeUpdate&&&&&&&&&#39;);

  },

  updated: function() {
   console.log(&#39;$$$$$$$this is parent updated$$$$$$$$&#39;);

  },

  methods: {
   changeParentData: function() {
    this.parentData = &#39;changeParentData&#39;

   },

   changeParentToChildren1Props: function() {
    this.parentToChildren1Props = &#39;changeParentToChildren1Props&#39;

   },

   changeParentToChildren2Props: function() {
    this.parentToChildren2Props = &#39;changeParentToChildren2Props&#39;

   }

  },
  components: {
   &#39;my-children1&#39;: Children1,
   &#39;my-children2&#39;: Children2
  }
 }
</script>

/** this is Children1.vue */
<template>
 <p>
  <p>{{&#39;children1 data : &#39; + children1Data}}</p>
  <p>{{&#39;parent to children1 props : &#39; + children1Props}}</p>
  <p>{{&#39;parent to children1 props to data : &#39; + 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: &#39;children1&#39;,
  props: [&#39;children1Props&#39;],
  data() {
   return {
    children1Data: &#39;Children1Data&#39;
   }
  },

  computed: {
   children1PropsData: function() {
    return this.children1Props
   }
  },

  beforeCreate: function() {
   console.log(&#39;*******this is children1 beforeCreate*********&#39;);

  },

  created: function() {

   console.log(&#39;######this is children1 created######&#39;);
  },

  beforeMount: function() {
   console.log(&#39;------this is children1 beforeMount------&#39;);

  },

  mounted: function() {
   console.log(&#39;++++++this is children1 mounted++++++++&#39;);

  },

  beforeUpdate: function() {
   console.log(&#39;&&&&&&&&this is children1 beforeUpdate&&&&&&&&&#39;);

  },

  updated: function() {
   console.log(&#39;$$$$$$$this is children1 updated$$$$$$$$&#39;);

  },

  methods: {
   changeChildren1Data: function() {
    this.children1Data = &#39;changeChildren1Data&#39;

   },

   emitParentToChangeChildren1Props: function() {
    console.log(&#39;emitParentToChangeChildren1Props&#39;);
    this.$emit(&#39;changeParentToChildren1Props&#39;);
   }
  }
 }
</script>

/** this is Children2.vue */
<template>
 <p>
  <p>{{&#39;children2 data : &#39; + children2Data}}</p>
  <p>{{&#39;parent to children2 props : &#39; + children2Props}}</p>
  <p>{{&#39;parent to children2 props to data : &#39; + 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: &#39;children2&#39;,
  props: [&#39;children2Props&#39;],
  data() {
   return {
    children2Data: &#39;Children2Data&#39;,
    children2PropsData: this.children2Props
   }
  },

  beforeCreate: function() {
   console.log(&#39;*******this is children2 beforeCreate*********&#39;);

  },

  created: function() {
   console.log(&#39;######this is children2 created######&#39;);

  },

  beforeMount: function() {
   console.log(&#39;------this is children2 beforeMount------&#39;);

  },

  mounted: function() {
   console.log(&#39;++++++this is children2 mounted++++++++&#39;);

  },

  beforeUpdate: function() {
   console.log(&#39;&&&&&&&&this is children2 beforeUpdate&&&&&&&&&#39;);

  },
  updated: function() {
   console.log(&#39;$$$$$$$this is children2 updated$$$$$$$$&#39;);

  },

  methods: {
   changeChildren2Data: function() {
    this.children2Data = &#39;changeChildren2Data&#39;
   },

   emitParentToChangeChildren2Props: function() {
    this.$emit(&#39;changeParentToChildren2Props&#39;);
   }
  }
 }
</script>

1. 父组件改变props，子组件如果直接使用props，会触发子组件更新

2. 父组件改变props，子组件如果将props放进data中再使用，不会触发子组件更新

3. 父组件改变props，子组件如果将props放进computed中再使用，会触发子组件更新

4. data，props和computed的变化都会触发组件更新

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Node.js中使用cheerio制作简单的网页爬虫（详细教程）

在vue中如何实现父组件向子组件传递多个数据

在React中使用Native如何实现自定义下拉刷新上拉加载的列表

在vue中如何解决无法动态修改jqgrid组件 url地址的问题

在vue中如何实现类似淘宝星级评分

以上是详细解答vue的变化对组件有什么影响？的详细内容。更多信息请关注PHP中文网其他相关文章！