在Vue中，计算属性（computed properties）是一种非常有用的功能，它们用于声明式地描述一个依赖于响应式数据的计算值。计算属性会根据它们的依赖进行缓存，并且只有当依赖发生变化时才会重新计算。这使得计算属性比方法（methods）更高效，尤其是在涉及到重复计算和大量数据时。

以下是一个使用计算属性的实例：

<template>
  <div>
    <p>原价：{{ price }}</p>
    <p>折后价：{{ discountedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.2
    };
  },
  computed: {
    // 计算属性定义
    discountedPrice() {
      // 这里的计算会根据price和discount的值来进行
      return this.price * (1 - this.discount);
    }
  }
};
</script>

在这个例子中，discountedPrice是一个计算属性，它依赖于组件的price和discount数据属性。当这些依赖项的值发生变化时，discountedPrice会自动更新。在模板中，你可以像使用普通属性一样使用计算属性。

计算属性的优势在于它们的响应式和缓存特性。如果多次访问discountedPrice而price和discount没有变化，计算属性不会重新执行计算，而是返回缓存的值，从而提高性能。

请注意，计算属性默认只有getter函数，如果你需要在用户操作时改变计算属性的值，你可以提供一个setter函数：

computed: {
  discountedPrice: {
    // getter
    get() {
      return this.price * (1 - this.discount);
    },
    // setter
    set(newValue) {
      this.price = newValue / (1 - this.discount);
    }
  }
}

在这个修改后的例子中，当你尝试设置discountedPrice时，实际上会更新price的值，保持折扣率不变。这样的setter函数可以用于处理用户输入，使得计算属性既可以读也可以写。