『computed 不生效的坑』

❌一开始还以为是因为数组被嵌套在对象内部，导致 computed 失效❌

✅后面查询了大量资料才发现原来是 没触发 Vue 的 响应式更新 导致的✅

---

<template>
  <div class="container">
    <div>{{ total }}div>
    <button @click="addData">添加数据button>
  div>
template>

export default {
  data() {
    return {
      form: {
        money: [],
      },
    };
  },
  computed: {
    total() {
      // 计算总金额
      const total = this.form.money.reduce((accumulator, item) => {
        const money = parseFloat(item.money);
        const num = parseFloat(item.num);
        if (!isNaN(money) && !isNaN(num)) {
          accumulator += money * num;
        }
        return accumulator;
      }, 0);
      // 保留2位小数
      return Math.round(total * 100) / 100;
    },
  },
  methods: {
    addData() {
      // ❌Vue的计算属性并不会自动侦测这个变化，因此total不会自动重新计算。
      // this.form.money[0] = { money: "100.99", num: "3" };

      // ✅使用 Vue.set 或者直接使用 this.$set 来更新数组中的元素，这将会触发 Vue 的响应式系统
      this.$set(this.form.money, 0, { money: "100.99", num: "3" });
    },
  },
};