Vue的computed计算属性你了解吗

Vue的computed计算属性在Vue框架开发中非常常用。它可以根据计算函数里的数据自动计算出结果，并且在数据发生变化时会自动重新计算，然后用于渲染模板。在这篇文章中，我们将深入了解Vue的computed计算属性，掌握计算属性的使用方法和技巧。

什么是Vue的computed计算属性

Vue的computed计算属性是在Vue实例中定义的函数。它返回一个计算结果，并且在使用时像数据值一样调用。computed计算属性的值会自动缓存，只有在依赖的数据发生改变时才会重新计算。

computed计算属性的使用方法

computed计算属性的使用方法和普通属性的使用方法类似，在Vue实例中定义一个computed属性，然后把计算函数赋值给它。计算函数中访问的数据属性可以是Vuex Store中的state，也可以是Vue实例中的data对象。

下面是一个简单的示例：

<template>
  <div>
    <p>总价：{{totalPrice}}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      price: 10,
      quantity: 3
    }
  },
  computed:{
    totalPrice(){
      return this.price * this.quantity;
    }
  }
}
</script>

在这个示例中，我们定义了一个计算属性totalPrice，它会根据price和quantity属性的值自动计算，然后用于渲染模板。

computed计算属性的优势和注意事项

computed计算属性相当于是Vue的响应式数据，它会自动根据数据的变化重新计算。计算属性的另一个优势是值的缓存，只有在依赖的数据发生变化时才会重新计算。

但是需要注意的是，computed计算属性必须是纯函数，它依赖的数据必须是响应式的。如果计算属性依赖了非响应式的数据，那么在数据变化时计算属性不会重新计算。同时，computed计算属性也不适用于所有场景，如果计算函数比较复杂，可能会导致性能问题。

示例一：计算圆的面积和周长

下面是一个关于计算圆的面积和周长的示例。在这个示例中，我们定义了一个圆的半径r，然后用computed计算属性计算圆的面积和周长。在计算属性中我们使用了Math.PI，这是一个常数，计算属性只有在r改变时才会重新计算。

<template>
  <div>
    <p>半径：{{r}}</p>
    <p>圆的面积：{{area}}</p>
    <p>圆的周长：{{circumference}}</p>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        r: 6
      }
    },
    computed: {
      area(){
        return Math.PI * this.r * this.r;
      },
      circumference(){
        return 2 * Math.PI * this.r;
      }
    }
  }
</script>

示例二：根据数据筛选商品

下面是一个关于根据数据筛选商品的示例。在这个示例中，我们定义了一个商品列表和一个搜索关键字，然后通过computed计算属性筛选符合关键字要求的商品。

<template>
  <div>
    <input v-model="keyword" placeholder="搜索商品">
    <ul>
      <li v-for="item in filterGoods">{{item.name}} - {{item.price}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        goods: [
          { name: '商品1', price: 20 },
          { name: '商品2', price: 40 },
          { name: '商品3', price: 60 },
          { name: '商品4', price: 80 },
          { name: '商品5', price: 100 },
        ],
        keyword: '',
      }
    },
    computed: {
      filterGoods(){
        return this.goods.filter(item => item.name.indexOf(this.keyword) !== -1);
      }
    }
  }
</script>

在这个示例中，我们通过computed计算属性filterGoods根据关键字筛选出符合要求的商品，并渲染到页面上。当我们修改关键字时，filterGoods会自动重新计算，展示最新的搜索结果。

以上是关于Vue的computed计算属性的介绍和示例，希望对您有所帮助。