vue监听对象数组时，打印出来的newValue和oldValue是同一个值

当监听数组、对象等复杂对象变化的时候，因为数据同源，虽然可以监听到数据发生了变化，但是因为指向的是同一个引用地址，所以打印出来的数据是一样的，这样我们就获取不到变化前的数据了。针对这种情况，我们可以用computed配合深克隆来实现。代码如下：

  const watchList = reactive([
      {
        name: "jack",
        checked: true,
      },
      {
        name: "tom",
        checked: false,
      },
    ]);
    const compList = computed(() => {
      // 两种方式返回都可以
      return watchList.map((item) => {
        return { ...item };
      });
      // return JSON.parse(JSON.stringify(watchList));
    });
    watch(compList, (newValues, prevValues) => {
      console.log("watchList:", newValues, prevValues);
    });

    const changeList = () => {
      // watchList.push({
      //   name: "jerry",
      //   checked: false,
      // });
      watchList[0].checked = true;
    };