computed计算属性的妙用！！！

vuejs的computed熟悉吗？
在我们写页面结构的时候可能会用到很多判断在标签上，那怎么有效的做好页面结构的优化呢？
先看一下很乱，没有做页面优化的代码结构：

<ul class="progress_state">
  <li class="type_item">
    <div class="wrap">
      <img class="stillness" src="@/assets/images/state_ok.png">
      <div class="type_state">{{ context.stepTitle.step1 }}</div>
    </div>
    <div class="rate">100%</div>
  </li>
  <li class="type_item">
    <div class="wrap">
      <img :class="[!eteStar ? 'move' : 'stillness']" src="@/assets/images/state_loding.svg" v-if="!eteStar">
      <img class="stillness" src="@/assets/images/state_ok.png" v-else>
      <div class="type_state">{{ context.stepTitle.step2 }}</div>
    </div>
    <div class="rate">{{ eteStar ? '100%' : '50%' }}</div>
  </li>
  <li class="type_item">
    <div class="wrap">
      <img class="stillness" src="@/assets/images/state_lose.svg" v-if="progressBar < 99">
      <img class="stillness" src="@/assets/images/state_ok.png" v-else>
      <div class="type_state">{{ context.stepTitle.step3 }}</div>
    </div>
    <div class="rate">{{ progressBar > 99 ? '100%' : '0%' }}</div>
  </li>
</ul>

可以看到很多地方用到了三元表达式，不管是css标签还是文案，这就造成了页面看起来很乱，也不方便后期的维护；但是可以看到的是这个页面结构其实是有规律的我们可以通过遍历和计算属性做优化。接下来做一下优化：

1.首先遍历出页面结构，使页面更加整洁，也更方便后期的维护；

<ul class="progress_state">
  <li v-for="(item, index) in progressItems" :key="index" class="type_item">
    <div class="wrap">
      <img :class="item.imgClass" :src="item.imgSrc">
      <div class="type_state">{{ item.title }}</div>
    </div>
    <div class="rate">{{ item.rate }}</div>
  </li>
</ul>

2.把需要的参数通过计算属性进行处理，把需要做判断的地方在计算属性中先做判断，让结构更加清晰，也更好维护；

progressItems() {
  return [
    {
      title: this.context.stepTitle.step1,
      imgSrc: stateOk,
      rate: '100%',
      imgClass: 'stillness',
    },
    {
      title: this.context.stepTitle.step2,
      imgSrc: this.eteStar ? stateOk : stateLoding,
      rate: this.eteStar ? '100%' : '50%',
      imgClass: this.eteStar ? 'stillness' : 'move',
    },
    {
      title: this.context.stepTitle.step3,
      imgSrc: this.progressBar > 99 ? stateOk : stateLose,
      rate: this.progressBar > 99 ? '100%' : '0%',
      imgClass: 'stillness',
    }
  ];
}

经过简单的两个操作就可以做到让页面更加整洁，也更好维护，这就是计算属性的魅力。