Vue3.0中watch的六种情况、以及watchEffect的使用

<template>
  <span>{{ num }}</span>
  <button @click="num++">点我+1</button>
  <hr />
  <h2>当前的信息：{{ msg }}</h2>
  <button @click="msg += '!!'">你好吗</button>
  <hr />
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄： {{ person.age }}</h2>
  <h2>薪水：{{ person.job.job1.salary }}</h2>
  <button @click="person.name += '6'">给我变6</button>
  <button @click="person.age++">给我变老</button>
  <button @click="person.job.job1.salary++">加钱</button>
</template>

<script>
import { ref, watch, reactive,watchEffect } from "vue";
export default {
  setup() {
    let num = ref(0);
    let msg = ref("你好呀");
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        job1: {
          salary: 20,
        },
      },
    });

    //情况一  ：监视一个数据,并配置参数
    watch(
      num,
      (newValue, oldValue) => {
        console.log("num正在变化", newValue, oldValue);
      },
      { immediate: true, deep: true }
    );
    //谁变化，就监听谁
    watchEffect(() => {
      const x1 = person.name
      console.log(22);
    })
    // 情况二： 监视多个数据
    // watch([num,msg], (newValue, oldValue) => {
    //   console.log("num正在变化", newValue, oldValue);
    // });

    // 情况三： 监视reactive全部数据的变化  //这里无法获取oldValue的值 
    // 强制开启了深度监听
    // watch(person,(newValue,oldValue) => {
    //   console.log('person变化了',newValue,oldValue);
    // })

    // 情况四： 监听reactive中的某一个属性,必须写成一个函数的形式
    // watch(()=>person.name, (newValue, oldValue) => {
    //   console.log("person变化了", newValue, oldValue);
    // });

    // 情况五：监听reactive中所定义的响应式数据的某些属性
    // watch([()=>person.name,()=>person.age], (newValue, oldValue) => {
    //   console.log("person变化了", newValue, oldValue);
    // });

    // 特殊情况：
    // 用函数来监视一个对象，那么如果对象里面的值变了，是无法监听的，所以他需要开启深度监听
      watch(()=>person.job, (newValue, oldValue) => {
        console.log("person变化了", newValue, oldValue);
      },{deep:true});
    return {
      num,
      msg,
      person,
    };
  },
};
</script>

<style>
</style>