本文已参与「新人创作礼」活动，一起开启掘金创作之路。

在vue3中有了Composition Api的概念，所以watch（监听）都放到了setup()里。首先我们需要定义数据，引入wahtc

import { ref, reactive, watch } from "vue";
  setup() {
    let sum = ref(0);
    let hello = ref("你好");
    let person = reactive({
      name: "lyy",
      age: 18,
      job: {
        name: "前端",
        salary: 20,
      },
    });
   }

watch接受三个参数（要监视的数据，回调函数，配置型）

情况一，监视ref所定义的单个响应式数据

watch(sum, (newValue, oldValue) => {
  console.log("sum变了", newValue, oldValue);
},{
  immediate:true,
});

情况二、监视ref所定义的多个响应式数据

watch([sum, hello], (newValue, oldValue) => {
  console.log("sum或者hello变了", newValue, oldValue);
});

情况三、监视reactive所定义的单个响应式数据,

注意：此处无法获得正确的oldValue，强制开始了深度监视（deep配置无效）

watch(person, (newValue, oldValue) => {
  console.log("person变了", newValue, oldValue);
});

情况四、监视reactive所定义的单个响应式数据的某个属性,

watch(
  () => person.age,
  (newValue, oldValue) => {
    console.log("person的age变了", newValue, oldValue);
  }
);

情况五、监视reactive所定义的单个响应式数据的某些属性,

watch([() => person.age, () => person.name], (newValue, oldValue) => {
  console.log("person的age变了", newValue, oldValue);
});

情况六、监视reactive所定义的单个响应式数据的某个对象类型数据,

watch(
  () => person.job,
  (newValue, oldValue) => {
    console.log("person的job变了", newValue, oldValue);
  },
  {
    deep: true,
  }
);