详细解答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中如何实现类似淘宝星级评分

Atas ialah kandungan terperinci 详细解答vue的变化对组件有什么影响？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!