How to use computed property in data in Vuejs

在Vue.js中，计算属性是非常有用的功能，特别适合处理数据的复杂逻辑。计算属性基于它们的依赖进行缓存，仅当依赖项发生变化时，它们才会重新计算。这使得计算属性比方法更高效，尤其是在处理重复且需要优化性能的场景中。

计算属性的实际应用举例:

假设我们在开发一个电商网站，对于商品列表界面我们需要展示每件商品的价格和折扣信息。我们拥有基本的商品价格，但需要计算折后价格。这里，我们可以使用计算属性来实现这一功能。

Vue组件代码示例:

vue
<template>
  <div>
    <h2>商品列表</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - 原价: {{ product.price }} - 折后价: {{ product.discountedPrice }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '手机', price: 2999, discount: 0.8 },
        { id: 2, name: '平板', price: 4999, discount: 0.75 }
      ]
    };
  },
  computed: {
    productsWithDiscount() {
      return this.products.map(product => ({
        ...product,
        discountedPrice: (product.price * product.discount).toFixed(2)
      }));
    }
  }
}
</script>

在这个例子中，我们在 computed 属性中定义了 productsWithDiscount，它基于 products 数组进行计算，为每个商品计算折后价。这个计算属性会自动缓存结果，并且只有当 products 数组中的内容发生变化时，例如价格或折扣率变动时，productsWithDiscount 才会重新计算，从而提高效率。

通过这种方式，我们可以保持原始数据的不变性，同时提供界面上所需的派生数据，这样既保持了数据的一致性，也减少了不必要的计算和资源消耗。