前端工程化组件化开发框架之Vue的最基础的计算属性

在Vue中，计算属性是基于其他属性值计算得出的属性。计算属性的值会被缓存起来，只有当其依赖的属性发生变化时才会重新计算。这种缓存机制能够避免不必要的计算开销，优化应用程序的性能。

下面，我们来看一个简单的例子来演示如何定义计算属性：

<template>
  <div>
    <p>商品数量: {{ quantity }}</p>
    <p>商品总价: {{ totalPrice }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      price: 10,
      qty: 2
    };
  },
  computed: {
    quantity() {
      return this.qty;
    },
    totalPrice() {
      return this.price * this.qty;
    }
  }
};
</script>

在上述代码中，我们定义了两个计算属性：quantity和totalPrice。其中，quantity直接返回了data中的qty属性，而totalPrice通过乘积运算符*计算data中的price属性与qty属性的积。

计算属性可以像普通属性一样在模板中使用，如上述代码中{{ quantity }}和{{ totalPrice }}。此时，Vue会自动计算并更新它们的值。

除了计算属性，Vue还提供了一种类似于计算属性但不同的东西，叫做“侦听器（watcher）”。Vue 的侦听器更加灵活，可以监听任何属性的变化，并执行相应的操作。如果你需要在属性变化时执行异步或开销较重的操作，使用侦听器可能更加合适。

总之，计算属性是Vue框架中非常基础和重要的功能之一。通过使用计算属性，我们可以简化复杂的计算代码，提高代码的可读性和可维护性，同时优化应用程序的性能。