Computed

计算属性是 Vue 中常用的一种属性类型，它具有缓存特性，只有在它的依赖发生变化时才会重新计算。计算属性可以依赖于其他计算属性或组件数据属性（Data），并返回一个最终的响应式数据属性，从而简化复杂的计算过程，提高代码的可读性和可维护性。

举个例子，假设有一个包含商品列表的 Vue 组件，每个商品包含名称和价格两个属性，我们需要根据每个商品的价格计算出它们的折扣价。我们可以使用计算属性来实现这一功能，例如：

Vue.component('product-list', {
  props: ['products'],
  computed: {
    discountedProducts: function() {
      return this.products.map(function(product) {
        return {
          name: product.name,
          originalPrice: product.price,
          discountPrice: product.price * 0.8 // 折扣价为原价的80%
        };
      });
    }
  },
  // ...
});

在上面的代码中，计算属性 discountedProducts 依赖于 this.products，每次 this.products 发生变化时，计算属性会重新计算并缓存计算结果。在模板中，我们可以像使用普通的数据属性一样使用计算属性：

<product-list :products="[
  { name: 'Product A', price: 100 },
  { name: 'Product B', price: 200 }
]">
  <ul>
    <li v-for="product in discountedProducts">
      {{ product.name }}: {{ product.discountPrice }}
    </li>
  </ul>
</product-list>

通常情况下，当需要在 Vue 组件中对一些数据进行复杂计算或处理时，可以使用 computed。

在使用 computed 时需要注意以下几点：

computed 只有在它所依赖的数据发生变化时才会重新计算，因此它具有缓存的特性，可以避免多次计算相同的数据，提高了性能。

computed 的返回值是一个新的虚拟属性，它会自动响应数据的变化，并能够在模板中使用。

在某些情况下，可能需要使用计算属性与监听属性之间的区别。通常情况下，computed 用来计算响应式的属性，而 watch 则用来监听非响应式的属性和异步操作。

computed 中应该只包含与响应式数据相关的处理逻辑，不应该产生副作用或改变其他数据。

如果某些数据对计算属性的结果没有影响，则不应该包含在计算属性的依赖列表中，可以使用其他方式（如方法或数据属性）进行处理。

使用 computed 可以简化代码，提高组件的可复用性和可维护性。