vue中计算属性computed理解说明包括vue侦听器,缓存与computed的区别

让我们来详细讲解一下Vue中的计算属性computed。

计算属性computed

计算属性computed是Vue中常用的一个属性，它可以计算出新的值。在Vue中，当多个属性相关联时，我们可以使用计算属性computed来进行复杂的计算。

计算属性的使用

在Vue组件中使用计算属性computed，需要在Vue实例中添加computed属性，并返回一个新的值。

示例1：

<template>
  <div>
    <p>当前的数量是：{{ num }}</p>
    <p>当前的总价是：{{ totalPrice }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      price: 10,
      num: 2
    };
  },
  computed: {
    totalPrice() {
      return this.price * this.num;
    }
  }
};
</script>

在上面的示例中，我们使用了计算属性computed来计算总价totalPrice，它的值为price*num。这样就可以方便地获取到总价，而不用在模板中进行复杂的计算。

计算属性的侦听器

当计算属性依赖的属性发生改变时，计算属性会重新计算。Vue利用计算属性的依赖关系自动对计算属性进行缓存，也就是说只要依赖的属性没有发生变化，就不需要重新计算，避免了重复计算的问题。

示例2：

<template>
  <div>
    <p>当前的数量是：{{ num }}</p>
    <p>当前的总价是：{{ totalPrice }}</p>
    <button @click="changeNum">改变数量</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      price: 10,
      num: 2
    };
  },
  computed: {
    totalPrice() {
      return this.price * this.num;
    }
  },
  methods: {
    changeNum() {
      this.num += 1;
    }
  }
};
</script>

在上面的示例中，我们通过一个changeNum方法来改变数据中的num属性。此时发现控制台输出了两次计算属性totalPrice，这是因为num属性发生了改变，计算属性需要重新计算。但第二次计算总价时，由于price属性并没有改变，计算属性直接返回了之前缓存的结果，避免了重复计算。