详解Vue computed计算属性是什么

下面我来详细讲解“详解Vue computed计算属性是什么”的完整攻略。

什么是computed计算属性？

在Vue.js中，computed是一个计算属性，即Vue自带的一种通用的计算方式。它是在模板中进行数据展示和操作的时候，可以使用的一种虚拟数据属性，也可用来监听数据的变化。

计算属性实际上就是对已经存在的数据进行处理，通过已有的数据给出新的计算结果。和methods不同的是，computed会缓存计算结果，只有在依赖数据发生变化时才会重新计算。

和computed配合使用的还有一个watch可以监听某些变化并执行一些操作，通常情况下可以使用computed来做的事情都可以用watch来做，但是两者的适用场景还是有很大的差别。

computed计算属性和 methods方法的区别

计算属性是根据其他数据的值计算出新的数据的，而methods是直接处理逻辑的方法。
计算属性的值是基于它所依赖的数据(响应式数据)进行计算的，而methods的值每次都会重新计算一次。
计算属性可以像普通属性一样使用，直接在Vue实例中调用，不需要添加括号，而methods则需要使用括号。

computed计算属性示例

下面通过两个示例来说明computed计算属性的使用

示例1：计算购物车中商品总价值

在一个购物车中，商品数量和商品单价会随时变化，而购物车中的商品总价值需要重新计算，此时就可以使用computed计算属性来计算商品总价值。

<template>
  <div>
    <div v-for="(item, index) in cart" :key="index">
      <div>{{item.name}}</div>
      <div>单价：{{item.price}}</div>
      <div>数量：
        <input type="number" v-model="item.quantity" min="1">
      </div>
      <div>小计：{{item.total}}</div>
    </div>
    <div>总价：{{total}}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cart: [
          {id: 1, name: '商品1', price: 20, quantity: 1},
          {id: 2, name: '商品2', price: 30, quantity: 2},
          {id: 3, name: '商品3', price: 10, quantity: 3},
          {id: 4, name: '商品4', price: 15, quantity: 2},
        ]
      }
    },
    computed: {
      total() {
        let sum = 0
        for (let i = 0; i < this.cart.length; i++) {
          sum += this.cart[i].price * this.cart[i].quantity
        }
        return sum
      }
    }
  }
</script>

在上面的代码中，total是一个取值为计算属性，它的值取决于cart数组和其中每个对象的属性。

示例2：动态过滤列表

在一个列表中，我们需要根据输入框中的关键字进行搜索并展示符合条件的结果，此时可以使用computed计算属性来动态过滤列表。

<template>
  <div>
    <input type="text" v-model="keyword">
    <ul>
      <li v-for="(item, index) in filterList" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: ['苹果', '香蕉', '西瓜', '梨子', '草莓'],
        keyword: ''
      }
    },
    computed: {
      filterList() {
        let _this = this
        return this.list.filter(function (item) {
          return item.indexOf(_this.keyword) !== -1
        })
      }
    }
  }
</script>

在上面的代码中，filterList是一个取值为计算属性，它会根据keyword的值来进行列表过滤，展示符合条件的结果。