Vue3中watch监听用法

1.监听ref定义的变量

<template>
    <h2>{{ sum }}~~~~~~~~~~~~~{{ num }}</h2>
    <button @click="sum++">数据相加</button>
    <button @click="num--">数据相减</button>
</template>

<script>
import { reactive, ref, watch } from "vue";
export default {
    setup() {
        let sum = ref(0);
        let num = ref(10);
         // 情况一：监听ref数据
        watch(
          sum,
          (newData, oldData) => {
               console.log(newData, oldData, "监听watch");
          },
          {
            immediate: true,
          }
        );
        // 情况二:监听ref多个数据 用数组包裹
        watch(
          [sum, num],
          (newData, oldData) => {
            console.log(newData, oldData, "监听watch");
          },
          {
            immediate: true,
          }
        );

        return {
          sum,
          num,
        };
    }
<script>
}
</script>

2.监听reactive定义的变量

<template>
    <h2>watch监听reactive变量</h2>
    <h4>姓名:{{ person.name }}</h4>
    <h4>年龄:{{ person.age }}</h4>
    <h4>薪资:{{ person.hobby.xz }}</h4>
    <button @click="person.name += '.'">改变姓名</button>
    <button @click="person.age++">改变年龄</button>
    <button @click="person.hobby.xz++">改变薪资</button>
</template>
<script>
import { reactive, ref, watch } from "vue";
export default {
    setup() {
        let person = reactive({
          name: "张三",
          age: 20,
          hobby: {
            xz: 20,
          },
        });
        // 情况三：监听reactive数据
        /* 
            问题1：newData和oldData返回的都是最新的值
            问题2：强制deep深度监听,设置deep无效
        */
        watch(person,(newData,oldData)=>{
            console.log(newData,oldData,"数据发生改变")
        },{
            deep:false
        })

        // 情况四:监听reactive中某一个响应式数据 必须写成函数形式
        watch(
          () => person.name,
          (newData, oldData) => {
            console.log(newData, oldData, "person中name发生改变了");
          }
        );

         // 情况五: 监听reactive中多个响应式数据,数组里面包函数形式
        watch(
          [ () => person.name,()=>person.age],
          (newData, oldData) => {
            console.log(newData, oldData, "person中name和age发生改变了");
          }
        );
        
        // 情况六:监听reactive中某一个对象类型的响应式数据
        watch(
          ()=>person.hobby,
          (newData, oldData) => {
            console.log(newData, oldData, "person中hobby.xz发生改变了")
          },
          {
            deep:true     //deep必须为true才能监听得到
          }
        );
        

        return {
          person,
        };
    }
}
</script>