Vue 计算属性中的返回值怎么获取

1. 引言

Vue.js 是一种流行的前端框架，它提供了一种简洁的方式来构建用户界面。在Vue中，计算属性（Computed Properties）是一种能够根据已有的数据计算得出新值的属性，它们可以在模板中被当做普通属性来使用，但是它们的值是通过计算得到的。本文将详细介绍Vue计算属性的使用，并解答在计算属性中获取返回值的方法。

2. Vue 计算属性的基本用法

在Vue中，我们可以使用计算属性来对已有的数据进行运算，从而得到我们想要的结果。计算属性是基于它们的依赖进行缓存的，只有依赖发生改变时，才会重新计算。这样可以减少不必要的计算，提高应用的性能。下面是一个基本的计算属性的示例：

<template>
  <div>
    <p>原始价格为：{{ price }}</p>
    <p>折扣后价格为：{{ discountedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100
    }
  },
  computed: {
    discountedPrice() {
      return this.price * 0.8;
    }
  }
};
</script>

在上面的示例中，price 是一个原始价格，discountedPrice 是通过计算得到的折扣后的价格。在模板中，我们可以直接使用 {{ discountedPrice }} 来显示折扣后的价格。

3. 计算属性的缓存

如前所述，计算属性是基于它们的依赖进行缓存的。这意味着，只要依赖的数据没有发生改变，计算属性就不会重新计算。这在某些情况下可以大大提高性能。

<template>
  <div>
    <p>原始价格为：{{ price }}</p>
    <p>折扣后价格为：{{ discountedPrice }}</p>
    <button @click="changePrice">改变价格</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100
    }
  },
  computed: {
    discountedPrice() {
      // 在此计算属性中，我们还可以添加其它逻辑
      // 只有 price 发生改变时，此计算属性才会重新计算
      console.log("计算属性重新计算");
      return this.price * 0.8;
    }
  },
  methods: {
    changePrice() {
      this.price += 50;
    }
  }
};
</script>

在上面的示例中，当点击 “改变价格” 的按钮时，price 的值会增加 50。但是由于 discountedPrice 依赖的是 price，并且 price 的值在按钮点击之前没有发生改变，所以计算属性不会重新计算。这就是计算属性的缓存机制。如果我们多次点击按钮，会发现控制台只会打印一次 “计算属性重新计算” 的信息。

4. 监听计算属性的变化

有时候，我们需要在计算属性的返回值发生变化时执行一些额外的逻辑。Vue 提供了 watch 来实现这个功能。

<template>
  <div>
    <p>原始价格为：{{ price }}</p>
    <p>折扣后价格为：{{ discountedPrice }}</p>
    <button @click="changePrice">改变价格</button>
    <p v-if="discountChanged">折扣发生了变化</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.8,
      discountChanged: false
    }
  },
  computed: {
    discountedPrice() {
      return this.price * this.discount;
    }
  },
  watch: {
    discountedPrice(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.discountChanged = true;
      } else {
        this.discountChanged = false;
      }
    }
  },
  methods: {
    changePrice() {
      this.price += 50;
    }
  }
};
</script>

在上面的示例中，我们添加了一个名为 discountChanged 的变量，并在模板中根据它的值显示对应的信息。我们同时添加了一个 watch 对计算属性 discountedPrice 进行监听，当它的值发生变化时，将设置 discountChanged 为 true。这样，当折扣发生变化时，页面上会显示 “折扣发生了变化” 的提示。

5. 计算属性的 getter 和 setter

除了默认的 getter 函数，Vue 还允许我们在计算属性内定义一个 setter 函数，以便对计算属性进行修改。

<template>
  <div>
    <p>原始价格为：{{ price }}</p>
    <p>折扣后价格为：{{ discountedPrice }}</p>
    <input type="number" v-model="discountedPrice" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.8
    }
  },
  computed: {
    discountedPrice: {
      get() {
        return this.price * this.discount;
      },
      set(newVal) {
        this.discount = newVal / this.price;
      }
    }
  }
};
</script>

在上面的示例中，我们给计算属性 discountedPrice 添加了一个 setter 函数，用于将输入框中的值赋给 discount。这样，当用户修改输入框中的值时，计算属性的 setter 函数就会被调用，进而改变 discount 的值。计算属性的 getter 函数还是原来的逻辑，会根据修改后的 discount 和 price 来重新计算折扣后的价格。

6. 总结

计算属性是 Vue.js 中非常有用和强大的特性之一。它们允许我们基于已有的数据计算出新的数据，使得代码更具可读性和可维护性。通过使用计算属性，我们可以避免在模板中编写复杂的表达式，提高代码的可读性，并且通过计算属性的缓存机制，还可以提高应用的性能。此外，Vue 还提供了监听计算属性变化和计算属性的 getter 和 setter 的功能，使得我们能够更加灵活地使用计算属性。