在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框架中非常基础和重要的功能之一。通过使用计算属性，我们可以简化复杂的计算代码，提高代码的可读性和可维护性，同时优化应用程序的性能。
