Vue中的计算属性介绍

当我们需要根据现有的数据进行计算，得到新的数据时，我们可以使用计算属性来实现。计算属性是一个被绑定到Vue实例的属性，该属性的值是基于其他属性计算得来的。 计算属性默认情况下是帶getter和setter的，所以使用它来进行数据转换和过滤非常方便。

计算属性的特性：
1. 计算属性计算的结果会被缓存，只有依赖的响应式属性发生改变才会重新计算；
2. 计算属性是基于它的依赖进行缓存，只有相关依赖发生改变时，才会对其进行重新计算；
3. 计算属性可以设置setter函数，从而实现双向绑定。

下面是两个示例，分别说明了计算属性的用法和特性。

示例一 —— 根据传递的参数计算数据

在这个示例中，我们将展示如何使用计算属性来根据传递的参数计算得到新的数据。

<template>
  <div>
    <input type="text" v-model="message" />
    <br />
    <p>你输入的内容是: {{ message }}</p>
    <p>你输入的长度是: {{ messageLength }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  computed: {
    messageLength() {
      return this.message.length;
    }
  }
}
</script>

在这个示例中，我们声明了一个数据message，并且使用v-model指令将用户输入的内容绑定到这个数据上。 根据计算属性messageLength的定义，我们可以根据message的长度来计算得到新的数据。最后，在模板中我们直接使用了这个计算属性来展示计算的结果。

示例二 —— 计算商品总价

在这个示例中，我们将展示如何使用计算属性来计算购物车中所有商品的总价。

<template>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} × {{ item.quantity }} = {{ itemTotalPrice(item) }}
      </li>
    </ul>
    <p>商品总价: {{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品 1', price: 20, quantity: 5 },
        { name: '商品 2', price: 10, quantity: 3 },
        { name: '商品 3', price: 30, quantity: 2 }
      ]
    }
  },
  computed: {
    totalPrice() {
      let sum = 0;
      for (let i = 0; i < this.items.length; i++) {
        sum += this.itemTotalPrice(this.items[i]);
      }
      return sum;
    }
  },
  methods: {
    itemTotalPrice(item) {
      return item.price * item.quantity;
    }
  }
}
</script>

在这个示例中，我们声明了一个数据items，这个数据表示购物车中所有的商品信息。利用v-for指令，我们将购物车中的每一个商品都展示出来，并且利用当前商品的信息来计算出每个商品的总价。 然后利用计算属性totalPrice来计算购物车中所有商品的总价。在计算属性中，我们遍历购物车中的所有商品，然后累加每个商品的总价。最后展示出来。

以上是关于Vue中计算属性的介绍和使用示例。