VUE2

当使用 vue2 中的 watch 配置项监听浅层数据的时候通过默认的监视方，当需要监听的数据是嵌套的数据时，通过配置 watch 的配置项进行监听。

VUE3

ref

const val = ref("");
watch(val, (newV, oldV) => {});
//or
watch(
  () => val.value,
  (newV, oldV) => {}
);

对象 orreactive

当使用 vue3 的组合式 api 监听数据的变化时，分为 ref 定义的响应式数据和 reactive 定义的数据，ref 定义的数据监听还是比较简单的，reactive 监听数据的时候分为几种情况：

1.当监听的为 reactive 定义的整个对象时，默认开启深度监听，无法通过 deep 关闭深度监听，并且无法正确获取 oldValue(上一次的值)。

const obj = reactive({});
watch(obj, (newV) => {});

2.当监听 reactive 定义的对象中的某个属性时又分为：

普通类型：通过函数返回值的形式监听， 可以正确获取 oldValue

const obj = reactive({ val: 2 });
watch(
  () => obj.val,
  (newV, oldV) => {}
);

复杂数据类型（对象 or 数组): 通过返回值的形式监听，并且需要开启深度监听，无法获取正确的 oldValue

const obj = reactive({ val: {} });
watch(
  () => obj.val,
  (newV) => {},
  { deep: true }
);