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 = "一塌糊涂";
来看下改进后的效果
