vue3 使用watch监听响应式对象时出现新旧值一致问题的解决方案

问题：

官方文档标明，监听响应式对象时会自动打开deep:true深层模式

因而笔者写了如下代码想要试一下页面展示情况 

let state = reactive({ item: 1 });
watch(
  state,
  (newVal, oldVal) => {
    console.log(oldVal, "oldVal");
    console.log(newVal, "newVal");
  }
);
state.item = 5;

正常情况下，浏览器输出应当为:oldVal:{item:1}，newVal:{item:5}

但运行程序后页面展示为：

查阅资料后发现，vue在watch监听时：在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。 

解决：

将代码改为如下方式

state = reactive({ item: 1 });
let newState = computed(() => {
  return JSON.stringify(state);
});
watch(
  newState,
  (newVal, oldVal) => {
    console.log(JSON.parse(oldVal), "oldVal");
    console.log(JSON.parse(newVal), "newVal");
  }
);
state.item = 5;

通过计算属性，将响应式对象转换为ComputedRef<string>的响应式字符串，之后监听这个字符串，将解包后的旧值新值转为对象形式即可

页面输出为: