[vue3快速入门] 10.vue最好用的特性——计算属性

计算属性就是定义一个数据，这个数据的值是根据其他数据通过一定的计算方式得到的。
这么说还是有点抽象，我们用例子来学习。
比如说现在有两颗无限宝石，一颗重30克，一颗重40克，要求页面上要显示每颗的重量，同时也要显示总重量。下面我们开始写代码
首先，计算属性的语法就是在vue对象中增加一个computed属性，形式跟methods类似

<template>
  <div>力量宝石重{{ powerStone }}克</div>
  <div>时间宝石重{{ timeStone }}克</div>
  <div>总重{{ total }}克</div>
</template>

<script>
// 计算属性
export default {
  name: 'App',
  data() {
    return {
      powerStone: 30,
      timeStone: 40,
    }
  },
  computed: {
    total() {
      return this.powerStone + this.timeStone
    },
  },
}
</script>

<style></style>

这样最后显示

力量宝石重30克
时间宝石重40克
总重70克

效果是对的，我们先学习一下computed的语法，
定义了一个函数，名字叫total，在函数可以用this直接访问vue中data的内容，最后return了这两个数据相加的结果，
在template中使用时，直接绑定的函数的名字，不用加括号，显示的结果就是计算属性中return的值

而且计算属性是根据data的值动态计算的，比如说我们如果更改宝石的重量，计算属性total的值会自动重新计算
聪明的小伙伴会说，反正双花括号里也支持js表达式，在里面直接写相加就行了

<div>总重{{ powerStone + timeStone }}克</div>

这样写效果是可以的，但是如果计算逻辑表复杂时，明显就不太好了

下面我们来写一个复杂一点的例子
比如说我们现在有三个超级英雄，神盾局要给他们支付工资，钢铁侠工资是10000元，美国队长工资是1000元，蜘蛛侠工资是1元。现在我们要分别显示他们三人的工资，并且显示总工资。
我们先来定义数据结构。

data() {
    return {
      heroList: [
        {
          name: '钢铁侠',
          salary: 10000,
        },
        {
          name: '美国队长',
          salary: 1000,
        },
        {
          name: '蜘蛛侠',
          salary: 1,
        },
      ],
    }
  },

三个英雄放在了一个数组里，每个英雄是一个对象，包括他的名字name属性，和他的工资salary属性
我们用之前学的循环把他们展示出来

<ul>
    <li v-for="item in heroList" :key="item">
      {{ item.name }}的工资是{{ item.salary }}元
    </li>
</ul>

下面该计算他们的总工资了，用一个循环把他们的工资都加起来

  computed: {
    total() {
      let totalSalary = 0
      this.heroList.forEach((item) => {
        totalSalary += item.salary
      })
      return totalSalary
    },
  },

这样需求就完成了

除了数学计算之外，计算属性当然也有别的用途，举一个最常见的例子，
在移动端下拉加载数据的时候，底部显示“下拉加载”，如果加载完了，没有更多数据了，要显示“没有更多了”
我们用计算属性这样实现

<template>
  <div>{{ tip }}</div>
</template>

<script>
// 计算属性
export default {
  name: 'App',
  data() {
    return {
      hasMore: true,
    }
  },
  computed: {
    tip() {
      if (this.hasMore) {
        return '下拉加载'
      } else {
        return '没有更多了'
      }
    },
  },
}
</script>

<style></style>

大家自己写一写，改变data里的值试一试，就更能体会计算属性的方便了，
先记住一条规则，能用计算属性实现的功能，就用计算属性实现

你可以试着写一个购物车的功能，购物车里有几件商品，每个商品购买了不同数量，把他们的名称、单价、购买数量都显示出来，并且显示总价