面试题：Vue计算属性在购物车项目中的应用场景

Question

在一个电商购物车项目中，需要实时计算购物车中商品的总价，包括商品单价乘以数量后的总和以及可能存在的折扣价计算等，阐述如何使用Vue的计算属性来实现这个功能，并且说明计算属性相比于直接在模板中进行计算的优势。

Answer 1

使用Vue计算属性实现购物车总价计算

1. 定义数据： 在Vue实例的data函数中，定义购物车商品数组cartItems，每个商品对象包含price（单价）、quantity（数量）等属性，以及可能的折扣相关数据，比如discount（折扣率）。

   data() {
       return {
           cartItems: [
               { id: 1, price: 10, quantity: 2 },
               { id: 2, price: 15, quantity: 1 }
           ],
           discount: 0.9
       };
   }
   

2. 定义计算属性： 在Vue实例的computed选项中定义totalPrice计算属性。

   computed: {
       totalPrice() {
           let subtotal = 0;
           this.cartItems.forEach(item => {
               subtotal += item.price * item.quantity;
           });
           return subtotal * this.discount;
       }
   }
   

3. 在模板中使用： 在模板中直接使用totalPrice计算属性。

   <template>
       <div>
           <p>购物车总价: {{ totalPrice }}</p>
       </div>
   </template>
   

计算属性相比于直接在模板中计算的优势

1. 代码可读性和维护性：
   • 在模板中直接计算，随着业务逻辑的复杂，模板会变得冗长且难以理解。例如，如果有多个商品计算逻辑和折扣计算逻辑混合在模板中，代码将非常混乱。而计算属性将复杂的计算逻辑封装在一个函数中，使得代码结构清晰，易于维护和修改。
2. 缓存机制：
   • 计算属性会基于它的依赖进行缓存。只有当它的依赖数据（如cartItems或discount）发生变化时，才会重新计算。如果直接在模板中计算，每次Vue实例更新时都会重新计算，浪费性能。例如，购物车中有多个商品，每次有一个商品的数量变化，模板中直接计算会重新计算整个总价，而计算属性只有依赖的商品数据变化时才会重新计算。
3. 复用性：
   • 计算属性可以在多个地方复用。比如，在模板的不同部分都需要显示购物车总价，或者在方法中也需要获取总价，直接在模板中计算无法复用，而计算属性可以很方便地在多处使用。