数据侦听watch
1.在vue3中，watch强制深度侦听了，无法通过参数配置修改
2.只能侦听ref定义的简单数据，或者reactive定义的对象或数组，例如：对象.属性，无法侦听,但是可以通过函数返回值的形式进行侦听，如下情况四
3.通过函数返回值侦听时，如果对象的属性也是一个对象时，此时对象的属性不具备强制deep为true的特性，需要手动加上{deep: true}进行深度侦听
setup() {
let num = ref(0);
let sex = ref('男');
let people = reactive({
name: 'xxx',
age: '18',
});
return {
people,
num,
}
}
情况一: 侦听ref定义的简单数据
watch(num, (newValue, oldValue) => {
console.log(newValue, oldValue);
}, {
immediate： true, deep: true});
情况二: 侦听对象
watch(people, (newValue, oldValue) => {
// newValue与oldValue的值一样，vue3的bug
console.log(newValue, oldValue);
}, {
immediate： true});
情况三：侦听reactive定义的对象中的某个属性
// 错误： people.name改变不会触发回调
watch(people.name, (newValue, oldValue) => {
// newValue与oldValue的值一样，vue3的bug
console.log(newValue, oldValue);
}, {
immediate： true});
// 正确方式
watch(() => people.name, (newValue, oldValue) => {
// newValue与oldValue的值一样，vue3的bug
console.log(newValue, oldValue);
}, {
immediate： true});
情况四: 侦听数组,数组中有一个数据发生变化，就会触发侦听回调
// 侦听ref定义的多个响应式数据
watch([num, sex], (newValue, oldValue) => {
console.log(newValue, oldValue);
}, {
immediate： true});
// 侦听reactive定义的对象中的多个属性
watch([() => people.name, () => people.age], (newValue, oldValue) => {
console.log(newValue, oldValue);
}, {
immediate： true});