詳細解答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中文網其他相關文章！