vue中computed计算属性的使用案例

computed计算属性是在Vue.js中非常常用的一个功能，它可以根据已有的数据计算出新的数据，然后通过模板渲染到页面上。

下面是一个Vue组件中使用computed计算属性的例子：

<template>
  <div>
    <p>商品名：{{ product.name }}</p>
    <p>商品价格：{{ product.price }}</p>
    <p>商品税价：{{ taxPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {
        name: "苹果",
        price: 10,
        taxRate: 0.1
      }
    };
  },
  computed: {
    taxPrice() {
      return this.product.price * this.product.taxRate;
    }
  }
};
</script>

在这个例子中，我们定义了一个商品对象，包含商品名、价格和税率。然后我们通过computed计算属性来计算商品的税价，最后在页面上渲染出来。

computed计算属性的好处是它们具有缓存性，也就是说，只要依赖的数据没有发生变化，computed计算属性就不会重新计算。这样可以避免不必要的计算，提高应用的性能。