vue3--watchEffect

watch的套路是：既要指明监视的属性，也要指明监视的回调。
watchEffect：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
watchEffect有点像computed:
但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

watchEffect(()=>{
  const x1 = sum.value
  const x2 = person.job.j1.salary
  console.log('watchEffect所指定的回调执行了')
})

<template>
  <div>我是watchdeme</div>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
  <hr />
  <h2>当前的信息为：{{msg}}</h2>
  <button @click="msg+='!'">点我+1</button>
  <hr />
  <h2>姓名： {{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪资{{person.job.j1.salary}}</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">张薪</button>
</template>

<script>
import { ref, reactive, watch ,watchEffect} from "vue";
export default {
  name: "WatchDemo",
  setup(props, context) {
    //    数据
    let sum = ref(0);
    let msg = ref("你好啊");
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    
    watchEffect(()=>{
      const x1 = sum.value
      const x2 = person.job.j1.salary
      console.log('watchEffect所指定的回调执行了')
    })

    //情况一 监视ref所定义的一个响应式数据
    // watch(sum, (newValue, oldValue) => {
    //   console.log("变了", newValue, oldValue);
    // },{immediate:true});
    //情况二 监视ref所定义的多个响应式数据
    // watch([sum,msg], (newValue, oldValue) => {
    //   console.log("sum或msg变了", newValue, oldValue);
    // },{immediate:true});
    //情况三 监视reactive所定义的响应式数据，注意此处无法正确的获取oldValue
    /*
            1、注意：此处无法正确的获取oldValue
            2、注意：强制开启了深度监视（deep配置无效）
        */
    // watch(person, (newValue, oldValue) => {
    //   console.log("person变化了", newValue, oldValue);
    // },{deep:false});//此次的Deep配置无效

    //情况四 监视reactive所定义的响应式数据中的某一个属性
    // watch(
    //   () => person.age,
    //   (newValue, oldValue) => {
    //     console.log("person的age变化了", newValue, oldValue);
    //   }
    // );
    //情况五 监视reactive所定义的响应式数据中的某些个属性
    // watch(
    //   [() => person.age,() => person.name],
    //   (newValue, oldValue) => {
    //     console.log("person的age或name变化了", newValue, oldValue);
    //   }
    // );
    // 特殊情况
      watch(
      () => person.job,
      (newValue, oldValue) => {
        console.log("person的job变化了", newValue, oldValue);
      },
      {deep:true}
    );

    // 返回一个对象（常用）
    return {
      sum,
      msg,
      person,
    };
  },
};
</script>