面试题：Vue侦听器立即执行选项与深度监听结合使用的复杂场景应用

Question

假设你正在开发一个电商购物车系统，购物车中的商品对象结构复杂，包含多层嵌套的属性。要求在页面加载时，就根据购物车中商品的初始状态计算总价并显示，并且当商品的任何属性（包括深层次的属性）发生变化时，能实时重新计算总价。请使用Vue的侦听器（结合立即执行选项和深度监听）来实现该功能，写出关键代码并解释实现思路。

Answer 1

关键代码

<template>
  <div>
    <div v-for="(item, index) in cartItems" :key="index">
      <!-- 商品展示及属性修改相关HTML -->
      <input v-model="item.price" type="number" placeholder="价格">
      <input v-model="item.quantity" type="number" placeholder="数量">
    </div>
    <p>总价: {{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        {
          id: 1,
          name: '商品1',
          price: 10,
          quantity: 2,
          // 其他复杂嵌套属性
          details: {
            subPrice: 5
          }
        }
      ],
      totalPrice: 0
    };
  },
  mounted() {
    this.calculateTotalPrice();
  },
  watch: {
    cartItems: {
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        this.calculateTotalPrice();
      }
    }
  },
  methods: {
    calculateTotalPrice() {
      this.totalPrice = this.cartItems.reduce((acc, item) => {
        // 假设总价计算逻辑，这里只是简单示例
        return acc + item.price * item.quantity + item.details.subPrice;
      }, 0);
    }
  }
};
</script>

实现思路

1. 数据初始化：在 data 函数中定义 cartItems 数组来存储购物车中的商品对象，以及 totalPrice 来存储总价。cartItems 中的商品对象具有复杂嵌套属性。
2. 初始计算：在 mounted 钩子函数中调用 calculateTotalPrice 方法，确保页面加载时就计算出初始总价并显示。
3. 侦听器设置：使用 watch 监听 cartItems。设置 immediate: true 使侦听器在组件加载后立即执行一次 handler 函数，从而初始化总价计算。deep: true 开启深度监听，这样即使商品对象内部深层次的属性发生变化，也能触发 handler 函数。
4. 总价计算：calculateTotalPrice 方法使用 reduce 方法遍历 cartItems 数组，按照特定的计算逻辑（如商品价格乘以数量加上嵌套属性中的子价格等）计算出总价，并更新 totalPrice，实现实时显示最新总价的功能。