vue3的watch

// 使用 Vue 3 的 watch 监听数据变化

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

// 示例 1: 监听单个 ref 响应式数据
const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`count 变化了，新的值是 ${newVal}，旧的值是 ${oldVal}`);
});

// 更新 count 的值来触发监听器
count.value++;

// 示例 2: 监听多个 ref 或 reactive 对象
const state = reactive({
  firstName: 'John',
  lastName: 'Doe'
});

watch([() => state.firstName, () => state.lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
  console.log(`firstName 变化了，新的值是 ${newFirstName}，旧的值是 ${oldFirstName}`);
  console.log(`lastName 变化了，新的值是 ${newLastName}，旧的值是 ${oldLastName}`);
});

// 更新 state 的属性值来触发监听器
state.firstName = 'Jane';
state.lastName = 'Smith';

// 示例 3: 深度监听对象属性的变化
const user = reactive({
  profile: {
    name: 'Alice',
    age: 25
  }
});

watch(() => user.profile, (newProfile, oldProfile) => {
  console.log('user.profile 发生了变化');
}, { deep: true });

// 更新嵌套对象的属性来触发监听器
user.profile.age = 26;

解释说明：

• watch 是 Vue 3 中用于监听响应式数据变化的函数。
• 示例 1：监听一个简单的 ref 类型的响应式数据 count，当 count 的值发生变化时，会触发回调函数并打印新旧值。
• 示例 2：监听多个 ref 或 reactive 对象的属性变化。通过传入一个数组来同时监听多个依赖项，并在它们发生变化时执行回调函数。
• 示例 3：使用 { deep: true } 选项进行深度监听，可以监听到嵌套对象内部属性的变化。