Vue3 - 监听（watch函数、watchEffect函数）

1、watch函数（既要指明监视的属性，也要指明监视的回调）

        坑：

1）监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）

2）监视reactive定义的响应式数据中某个属性时：deep配置有效

setup(){
    let sum = ref(0)
	 let msg = ref('ABCD')
    let person = reactive({
	   name:'张三',
	   age:18,
	   job:{
		  j1:{
			 salary:20
		  }
	   }
    })

    //情况一：监视ref定义的响应式数据
    watch(sum,(newValue,oldValue)=>{
	    console.log('sum变化了',newValue,oldValue)
    },{immediate:true})

    //情况二：监视多个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}) //此处的deep配置不再奏效

    //情况四：监视reactive定义的响应式数据中的某个属性
    watch(()=>person.job,(newValue,oldValue)=>{
	    console.log('person的job变化了',newValue,oldValue)
    },{immediate:true,deep:true}) 

    //情况五：监视reactive定义的响应式数据中的某些属性
    watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
    	console.log('person的job变化了',newValue,oldValue)
    },{immediate:true,deep:true})

    //特殊情况
    watch(()=>person.job,(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
    },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效
}

2、watchEffect函数（不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性 ）

        watchEffect不需要指定监听的属性，它会自动的收集依赖， 只要我们回调中引用到了 响应式的属性， 那么当这些属性变更的时候，这个回调都会执行

        watchEffect有点像computed，更注重的是过程（回调函数的函数体），不用写返回值

watchEffect(() => console.log(userID))