Vue中使用v-for时的无限循环问题

代码如下，在v-for里面使用了计算属性的方法，对props数据进行了更改，数据更改以后会造成页面重新渲染会再次触发v-for就会造成死循环。

<template>
  <div class='growth'>
    <div class='monthGrowth'>
      <template
        v-for="(item,index) in progressStyleOrder"
      >//这里progressStyleOrder是在computed里面进行处理后的数据然后再渲染
        <Process
          :key="index"
          class="process"
          :width="item.width"  
          :height="0.6"
          contentBgColor="transparent" 
          :progressbgColor="item.color"
          :showDesc="true"
          :desc="item.desc"
          textPosition = "flex-end"
        ></Process>
      </template>
      <div class="label" :style="{background:progressStyleOrder[0].color,progressStyleOrder[0].width-0.4+'rem'}">
          <span>增长{{progress.growthRate}}%</span>
          <div class='triangle' :style="{progressStyleOrder[0].color}"></div>
      </div>
    </div> 
  </div>
</template>
<script>
    import { Process } from 'ftk-mui'
    export default {
      name: 'growth',
      components:{
      },
      props: [
        "progress"
      ],
      data(){
        return {
         
        }  
      },
      created(){
        
      },
      mounted(){
        
      },
      methods:{
        
      },
      computed:{
//这里是v-for内使用的数据
        progressStyleOrder: function () {
          return this.progress.progressStyle.concat().sort(function (a,b) {
            return b['width'] - a['width'];
          });
        }
      }
    }
</script>

解决办法，在mounted以后进行数据处理，得到新的数据，然后再挂载在dom上

<template>
  <div class='growth'>
    <div class='monthGrowth'>
      <template
        v-for="(item,index) in progressOrderList"
      >
        <Process
          :key="index"
          class="process"
          :width="item.width"  
          :height="0.6"
          contentBgColor="transparent" 
          :progressbgColor="item.color"
          :showDesc="true"
          :desc="item.desc"
          textPosition = "flex-end"
        ></Process>
      </template>
      <div class="label" :style="{background:progressOrderList[0].color,left:progressOrderList[0].width-0.4+'rem'}">
          <span>增长{{progress.growthRate}}%</span>
          <div class='triangle' :style="{borderTopColor:progressOrderList[0].color}"></div>
      </div>
    </div> 
  </div>
</template>
<script>
    import { Process } from 'ftk-mui'
    export default {
      name: 'growth',
      components:{
      },
      props: [
        "progress"
      ],
      data(){
        return {
          progressOrderList:[],
        }  
      },
      created(){
        
      },
      mounted(){
        this.progressStyleOrder();
        this.progressStyleOrderReverse();
      },
      methods:{
//将方法在methods中定义，并且将新的数据存储在data中，然后在mounted后触发
        progressStyleOrder: function () {
          let progressOrder = this.progress.progressStyle.concat().sort(function (a,b) {
            return b['width'] - a['width'];
          });
          this.progressOrderList = progressOrder
        },
      },
      computed:{
        
      }
    }
</script>