解决vue3中watch监听复杂数据类型，返回的都是改变后的值的问题

watch监听，不论是在vue2版本中，还是在vue3版本中都是一个重要的属性。那么就会有那么一个坑埋在了vue3当中，如果不仔细浏览文档可能找起来解决方案会让自己怀疑人生

步入整体，我们先来看看vue3中watch监听基本数据类型的时候的表现

demo代码

import { computed, ref, watch } from "vue";
let msg = ref<string>("小红帽");
let msg2 = ref<string>("大灰狼");
watch(
  [msg, msg2],
  (newV, oldV) => {
    console.log("newV--", newV);
    console.log("oldV--", oldV);
  },
  {}
);
msg.value = '小红帽111111111'
msg2.value = '大灰狼111111111'

demo效果

这里我们可以看出，在数据发生变化后，我们可以获取到所监听的变量的变化前后的值，基本数据类型在这里监听是完全没有任何问题的

接下来我们来展示复杂数据类型的监听结果

这里我们先展示同上的写法，看看回不回正常输出

let message = ref({
  foo: {
    bar: {
      name: "真的很无语啊",
    },
  },
});
watch(
  message,
  (newV, oldV) => {
    console.log("newV--", newV);
    console.log("oldV--", oldV);
  },
  {
    // 如果变量message是通过ref来创建的，那么需要手动开启deep深度监听
    deep: true,
  }
);
message.value.foo.bar.name = "一塌糊涂";

看看运行打印的效果

这里我们可以看到，打印出来的效果明显是有错误的，这个问题也一度让我怀疑是不是自己的代码有问题，直到查阅了官方文档之后才知道，这里不能全量监听，需要监听具体的数值
所以呢，在这里我们改进了写法

import { computed, ref, watch } from "vue";
let message = ref({
  foo: {
    bar: {
      name: "真的很无语啊",
    },
  },
});
watch(
  () => message.value.foo.bar.name,//	这里为改进点
  (newV, oldV) => {
    console.log("newV--", newV);
    console.log("oldV--", oldV);
  },
  {
    // 如果变量message是通过ref来创建的，那么需要手动开启deep深度监听
    deep: true,
  }
);
message.value.foo.bar.name = "一塌糊涂";

来看下改进后的效果

总结：这里在改用正确的监听方法后，是可以拿到我们想要的数据的