vue 版本3的watch监听和watchEffect监听的区别

代码如下：

<p>我的资料：姓名：{{name}} 年龄： {{age}}</p> 

import {ref,watch,watchEffect} from 'vue';

const name = ref("carver");
const age = ref(100);
const people = ref({
    name:"carver",
    age:22
});

//*****************************************************【监听属性】*****************************************************//
//【监听属性】 写法：变量，参数（新值，旧值）    注意：该 变量的类型只能为字符串/数字
watch(name,(newValue,oldValue)=>{
    console.log('新值：'+newValue+'，旧值：'+oldValue);
})
//【监听属性】 写法：变量，参数（新值）    注意：该 变量的类型只能为字符串/数字
watch(name,(newValue)=>{
    console.log('新值：'+newValue);
})

//*****************************************************【监听对象】*****************************************************//
//【监听对象】单独监听对象的中的每个属性
watch(people.value.name,(newValue)=>{
    console.log('新值：'+newValue);
})
watch(people.value.age,(newValue)=>{
    console.log('新值：'+newValue);
})

//【深度监听对象】该people中的对象属性变化都会被监听，deep:true 开启深度监听，immediate:true 立即执行
watch(people,(newPeople)=>{
    console.log(newPeople);
},{deep:true},{immediate:true})

//【监听多个属性】多属性监听：watch([属性1，属性2...],([属性1，属性2...],[属性1，属性2...])=>{})
watch([name，age],([newName，newAge],[oldName，oldAge])=>{
    console.log(newName，newAge);
    console.log(oldName，oldAge);
})

//【监听多个属性】单独监听：watch([属性1，属性2...],([属性1，属性2...],[属性1，属性2...])=>{})
watch(name,(newValue,oldValue)=>{
    console.log('新值：'+newValue+'，旧值：'+oldValue);
})
watch(age,(newValue,oldValue)=>{
    console.log('新值：'+newValue+'，旧值：'+oldValue);
})

//【监听所有属性】注意：性能较差
watchEffect(()=>{
    console.log(name.value,age.value)
})