Vue3监听watch、watchEffect

import { watch, ref, reactive, watchEffect } from "vue";

const obj = ref({
  name: "lisi",
  age: 20,
});
const obj2 = reactive({
  name: "zhangsan",
  age: 18,
});

watch(
  () => obj.value.name,
  (newVal, oldVal) => {
    console.log("obj", newVal, oldVal);
  },
  {
    immediate: true,
  }
);

watch(
  () => obj2.age,
  (newVal, oldVal) => {
    console.log("obj2", newVal, oldVal);
  },
  {
    immediate: true,
  }
);

watchEffect(() => {
  console.log("obj", obj.value.name);
});

setTimeout(() => {
  obj2.age = 27;
  obj.value.name = "lisi2";
}, 2000);

watchEffect首次会执行一次，进行数据监听收集，只要是在其回调函数中使用过的数据都会被监听。 watch的话，监听基本数据类型就直接监听，对于引用数据类型（无论是reactive还是ref修饰的），都需要用函数返回值的方式进行监听。watch想要同时监听多个值的话，则需要将多个值用数组包裹起来去监听。

同时监听多个值：

const test1 = ref("aaa");
const test2 = ref("bbb");

watch([test1, test2], (newVal, oldVal) => {
  console.log('new',newVal,'old', oldVal);
});

setTimeout(() => {
  test1.value = "ccc";
  test2.value = "ddd";
}, 2000);