关于vue中计算属性computed的详细讲解

当我们在Vue中使用数据时，有时我们需要对它做一些逻辑上的处理，例如对数据进行格式化、过滤和计算等。在这种情况下，我们通常可以使用计算属性(computed)来进行处理。

计算属性(computed)是什么

计算属性是Vue提供的一种数据计算的方式，是一个简化版的方法，可以轻松适应许多情况下的数据处理。计算属性是基于依赖进行缓存的，只有它所依赖的数据发生了变化，它才会重新计算，否则就会直接使用缓存已有的结果，从而提高应用的性能。

计算属性的定义方式是在Vue实例的计算属性中添加一个函数，这个函数就是这个计算属性的处理逻辑代码，例如：

new Vue({
  data: {
    message: 'Hello World'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

在这个例子中，我们定义了一个计算属性reversedMessage，它的逻辑是将data中的message属性利用split()、reverse()和join()方法反转，最后返回反转后的结果。

计算属性(computed)和方法(method)的区别

计算属性和普通的方法虽然看起来很像，但是在Vue中，它们是有区别的。

第一个区别是：计算属性是基于依赖的缓存，只有它所依赖的数据发生了变化，它才会重新计算，否则就会直接使用缓存已有的结果；而方法则是每次调用时都会重新计算。

第二个区别是：当你使用计算属性时，在模板中直接引用计算属性，Vue会自动将其缓存起来。而使用方法时，每次调用都会执行方法，所以计算属性的性能会更高一些。

第三个区别是：当需要响应某些数据的变化时，我们应该使用计算属性。而当需要进行一些业务逻辑或者事件处理时，我们则应该使用方法。

计算属性(computed)示例

接下来，我们通过两个示例来深入掌握Vue中的计算属性。

示例一：温度转换

在这个示例中，我们需要实现一个温度的转换器，将摄氏温度转换为华氏温度。

温度转换公式是：F = C x 1.8 + 32，华氏温度 = 摄氏温度 * 1.8 + 32。

假设我们已经有了一个输入框绑定的数据celsius，我们现在需要实现一个计算属性，将它转换为华氏温度。

<template>
  <div>
    <input v-model="celsius">
    <p>摄氏温度: {{ celsius }}</p>
    <p>华氏温度: {{ fahrenheit }}</p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        celsius: 0
      }
    },
    computed: {
      fahrenheit: function () {
        return (this.celsius * 1.8 + 32).toFixed(2)
      }
    }
  }
</script>

在这个例子中，我们定义了一个数据celsius，并将其绑定在了一个输入框上。我们同时定义了一个计算属性fahrenheit，它的值就是将celsius转换为华氏温度的结果，它利用了计算属性的特性，只有在celsius变化时，它才会重新计算，从而提高了应用的性能。

示例二：购物车总价

在这个示例中，我们需要实现一个购物车的功能，用户可以添加商品、删除商品和修改商品数量，并且需要实时计算购物车的总价。

假设我们已经定义了一个用于渲染购物车的组件CartItem，它接受两个参数book和count，book表示书籍信息，count表示该书籍数量。

我们需要定义一个计算属性，用来计算购物车的总价。

<template>
  <div>
    <CartItem v-for="(item, index) in cart" :key="index" :book="item.book" :count="item.count"/>
    <div>
      <p>总价：{{ totalPrice }}</p>
    </div>
  </div>
</template>

<script>
  import CartItem from './CartItem.vue'

  export default {
    components: {
      CartItem
    },
    data () {
      return {
        cart: [
          {
            book: {
              name: 'Vue权威指南',
              price: 98
            },
            count: 1
          },
          {
            book: {
              name: 'JavaScript高级程序设计',
              price: 88
            },
            count: 3
          }
        ]
      }
    },
    computed: {
      totalPrice: function () {
        let price = 0
        for (let i = 0; i < this.cart.length; i++) {
          price += this.cart[i].book.price * this.cart[i].count
        }
        return price
      }
    }
  }
</script>

在这个例子中，我们定义了一个数据cart，它表示购物车中的商品信息。我们同时定义了一个计算属性totalPrice，它的值就是购物车中所有商品的价格之和。它通过遍历cart数组，计算出每个商品的价格，最后累加得到购物车的总价。同样的，计算属性totalPrice会基于依赖的缓存，只有cart发生改变，它才会重新计算。

总结

通过以上两个示例，我们可以看出，计算属性确实是一个非常方便的数据计算方式，可以解决许多简单场景的数据处理问题。在Vue开发中，我们应该多加利用计算属性，从而提升应用的性能和开发效率。