vue监听整个数组变化时新值和旧值一样

今天在要做的需求中遇到一个问题，就是根据数组中每个元素的变化执行相应的逻辑，然后用watch监听惊奇的发现：

export default {
  data() {
    return {
      typeList: [
        {
          id: 1,
          status: 0,
          name: "蔬菜",
        },
        {
          id: 2,
          status: 0,
          name: "水果",
        },
        {
          id: 3,
          status: 1,
          name: "花卉",
        },
      ],
    };
  },
  watch: {
    typeList: {
      deep: true,
      handler(newVal, oldVal) {
        console.log("newVal", newVal);
        console.log("oldVal", oldVal);
      },
    },
  }
}

image1

经过查阅，可以大致这么理解：
因为监听的是一个对象，是一个引用类型，前后值指向同一个内存地址，它们索引同一个对象/数组，Vue 并不会保留修改之前值的副本。
所以，可以利用computed来解决

export default {
  computed: {
    tempArr() {
      return JSON.parse(JSON.stringify(this.typeList));
    },
  },
  watch: {
    tempArr: {
      deep: true,
      handler(newVal, oldVal) {
        console.log("newVal", newVal);
        console.log("oldVal",oldVal);
      },
    },
  }  
}