Watch Effect

<template>
   <button @click="number.count++">点我count++</button>
   <span>count的值：{{ number.count }}</span>
</template>

<script>
import { reactive, watchEffect } from 'vue';
export default {
    name: 'ZzzWatchEffect',

    setup(){
        let number = reactive({count:0})
        watchEffect(()=>{
            console.log("我被执行力",number.count);
        })
        return{
            number
        }
    }
};

watchEffect:

        不需要指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。在这个回调函数中，他会自动监听响应数据，当回调函数望面的响应数据发生变化，回到函数就会立即执行。一进页面就执行一遍回调函数

watch:

        //情况一：监视ref第一得响应式数据
        watch(sum, (newValue, oldvalue) => {
            console.log('sum变化了', newValue, oldvalue);
        }, { immediate: true })
        //
        watch(obj.value, (newValue, oldValue) => {
            console.log('obj变化了', newValue, oldValue)
        })
        //情况二：监视多个ref定义的响应式数据
        watch([sum, msg], (newValue, oldValue) => {
            console.log('sum和msg变化了', newValue, oldValue)//俩个参数返回的数组
        })
        //情况三：监视reactive定义的响应式数据
        //若watch监视的是reactive定义的响应式数据，划无法正确获得oldvalue
        //若watch监视的是reactive定义的响应式数据，则强制开启了深度监视
        watch(person,(newValue, oldValue) => {
            console.log('person变化了', newValue, oldValue)
        },{immediate:true,deep:false})
        //情况四：监视reactive定义的响应式数据中的某个属性
        //监视reactive定义的响应式数据中的某个属性，deep配置有效
        watch(()=>person.job.salary, (newValue, oldValue) => {
            console.log('person的job变化了', newValue, oldValue)
        }, { deep: true, immediate: true })
        情况五：监视reactive定义的响应式数据中的某些属性