vue3 使用 watch函数（精准监听）

适用场景：需明确监听特定属性，获取新旧值对比，或控制监听时机（如深度监听、立即执行）。

语法示例：

import { ref, watch } from 'vue';

const count = ref(0);
// 监听单个属性
watch(count, (newVal, oldVal) => {
  console.log(`值从 ${oldVal} 变为 ${newVal}`);
});

// 监听对象属性（需函数返回）
const state = reactive({ user: { name: 'Alice' } });
watch(() => state.user.name, (newName) => {
  console.log(`用户名更新: ${newName}`);
});

// 深度监听对象
watch(() => state.user, (newUser) => {
  console.log('用户对象变化', newUser);
}, { deep: true });

// 监听多个属性
const [a, b] = [ref(1), ref(2)];
watch([a, b], ([newA, newB], [oldA, oldB]) => {
  console.log(`a: ${oldA}→${newA}, b: ${oldB}→${newB}`);
});