vue3中watch监听的各种情况

一、ref定义的响应类型

1、ref 定义的基本类型：（如 number、string）
import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});
为什么不用箭头函数？
这里直接监听的是 ref 的值，watch 会自动处理 ref 的 .value，因此不需要手动提取值。
(监听的是基本类型，不使用箭头函数)

2、ref 定义的引用类型：（如 object、array）
如果监听的是 ref 定义的数组或对象的 整体值，不需要箭头函数
const user = ref({ name: 'Alice', age: 25 });

watch(user, (newUser, oldUser) => {
  console.log(`User changed from`, oldUser, `to`, newUser);
}, { deep: true });

user.value.age = 26; // 输出：User changed from {name: 'Alice', age: 25} to {name: 'Alice', age: 26}
(监听整个引用时，不需要箭头函数，但是需要使用 { deep: true } 来深度监听内部属性的变化)

3、ref 定义的引用类型：（如 object、array）
如果监听的是 ref 定义的数组或对象的 某个属性，需要箭头函数
const user = ref({ name: 'Alice', age: 25 });
watch(() => user.value.name, (newValue, oldValue) => {
  console.log(`name changed from ${oldValue} to ${newValue}`);
});
(此时监听的是其中一个属性并不是整体了，使用箭头函数)

二、reactive定义的响应类型

1、reactive定义的类型(监听对象或数组中的某个值)
import { reactive, watch } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 25
});

watch(() => state.name, (newValue, oldValue) => {
  console.log(`name changed from ${oldValue} to ${newValue}`);
});
为什么用箭头函数？
这里监听的是 reactive 对象的某个属性（如 state.name）。箭头函数的作用是创建一个 getter，动态提
取需要监听的值。watch 会自动追踪这个 getter 的返回值，并在值变化时触发回调。
(监听的是其中一个属性，使用箭头函数)

2、reactive定义的类型(监听整个响应式对象)
import { reactive, watch } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 25
});

watch(state, (newValue, oldValue) => {
  console.log(`state changed from ${oldValue} to ${newValue}`);
}, { deep: true }); // 需要设置 deep: true 来监听对象内部属性的变化

deep: true 是必须的，因为默认情况下 watch 只会监听对象的直接变化(例如对象被整体赋值了)，
不会深入监听内部属性的变化(而加了deep:true后，对象深层次嵌套的嵌套 内部某个属性变化了也能被监听到)
(监听的是对象整体，不需要箭头函数，但是不能监听到深层次的属性变化，要想监听深层次变化，加上deep:true)

三、监听props传来的值

const props = defineProps({
 message: String
});

watch(() => props.message, (newValue, oldValue) => {
 console.log(`message changed from ${oldValue} to ${newValue}`);
});
props 是组件的外部传入数据，监听 props 时，需要通过 getter 函数访问
这些数据源总是需要箭头函数，因为它们需要动态提取值
(props可以用对象或者数组来接收所有传来的数据，相当于监听的是其中一个属性，使用箭头函数)

1、当监需要箭头函数的情况：
当监听的目标是 reactive 对象的某个属性、计算属性的值、props 的某个属性 或 任何需要动态提取的值 时，需要使用箭头函数来创建一个 getter，以便 watch 能够追踪这些值的变化。听的目标是 reactive 对象的某个属性、计算属性的值、props 的某个属性 或 任何需要动态提取的值 时，需要使用箭头函数来创建一个 getter，以便 watch 能够追踪这些值的变化
2、不需要箭头函数的情况：
当监听的目标是一个 直接的响应式引用（ref） 或 整个 reactive 对象 时，不需要箭头函数。因为 watch 会自动处理这些数据源的变化。