vue 什么时候使用computed

在Vue中，computed是一种计算属性，最常用的场景是在模板中使用需要经过计算才能得到的数据。相比使用methods，computed具有缓存功能，只有在它的依赖发生改变时才会重新计算，可以优化性能。

当需要对一个或多个data属性进行某种计算，并把这些计算的结果展示给用户时，可以使用computed。例如，在一个购物车应用中，需要计算购物车中所有商品的总价格，可以使用computed来计算，代码如下：

<template>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 10 },
        { id: 2, name: '商品2', price: 20 },
        { id: 3, name: '商品3', price: 30 }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.products.reduce((total, product) => total + product.price, 0);
    }
  }
};
</script>

在模板中，可以直接使用totalPrice来展示购物车中所有商品的价格总和。当增加或删除商品时，Vue会自动更新totalPrice的值。

除此之外，还有一种场景是当需要对data属性进行监听并在其发生变化时进行一些操作时，可以使用computed。例如，在一个搜索应用中，需要对输入的关键词进行搜索，可以使用computed来监听关键词的变化并触发搜索操作。

综上所述，在需要对data属性进行计算或监听时，可以使用computed来解决问题。