vue3的侦听器watch与watchEffect

<template>
    <div>
        <h1>计算属性</h1>
        <hr>
        <div>{{sum}}</div>
        <button @click="add">点我加1</button>
        <hr>
        <div>{{str}}</div>
        <button @click="addTanhao">点我加!</button>
        <div>{{person.name}}</div>
        <div>{{person.age}}</div>
        <div>{{person.job.jobName}}</div>
        <button @click="person.name+='~'">姓名加~</button>
        <button @click="person.age++">年龄加1</button>
        <button @click="person.job.jobName += '累'">工作名加累</button>
    </div>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";
import { watch, watchEffect } from "@vue/runtime-core";
export default {
    name: "Vue3Study05Setup",
    setup() {
        let sum = ref(0);
        let str = ref("hello");

        let person = reactive({
            name: "lin",
            age: 18,
            job:{
              jobName:'前端'
            }
        });

        function add() {
            sum.value++;
        }
        function addTanhao() {
            str.value += "!";
        }

        // 情况1 watch监听ref定义的一个简单数据 => 立即监听(immediate)
        // watch(
        //     sum,
        //     (newValue, oldValue) => {
        //         console.log("数据变了", newValue, oldValue);
        //     },
        //     { immediate: true }
        // );

        // 情况2 watch监听ref定义的多个简单数据(第一个参数是数组) => 打印也是一个数组
        // watch([sum, str], (newValue, oldValue) => {
        //     console.log("数据变了", newValue, oldValue); // 数据变了 (2)[0, 'hello!'] (2)[0, 'hello']
        // });

        // 情况3 watch监听reactive定义的对象(全部属性)=> oldValue(没用)和newValue值一样
        // watch(person, (newValue, oldValue) => {
        //     console.log(newValue, oldValue);
        // });

        // 情况4 watch监听reactive定义的对象(某个属性),第一个参数必须是函数
        // watch(()=>person.name, (newValue, oldValue) => {
        //     console.log(newValue, oldValue);
        // });

        // 情况4 watch监听reactive定义的对象(多个属性),第一个参数必须是数组
        // watch([()=>person.name,()=>person.age], (newValue, oldValue) => {
        //     console.log(newValue, oldValue);
        // });

        // 情况5 watch监听reactive定义的对象(属性为深层次的对象),必须有第三参数(属性deep:true)
        // watch(()=>person.job, (newValue, oldValue) => {
        //     console.log(newValue, oldValue);
        // },{deep:true});
        
        // vue3中新的侦听器 watchEffect => 回调函数用到什么, 就监视什么
        // watchEffect(()=>{
        //   if(sum.value>1){
        //     alert('watchEffect 监视sum成功了')
        //   }
        //   console.log('watchEffect执行了',sum.value);
        // })

        /**
         * watch与watchEffect区别
         *    watch       =>  既要指明监视的属性, 也要指明监视的回调
         *    watchEffect =>  不用指明监视那个属性, 监视的回调中用到那个属性, 就监视那个属性
         * */ 


        return {
            sum,
            add,
            str,
            addTanhao,
            person,
        };
    },
};
</script>