Vue3中watch监听对象的属性值(监听源必须是一个getter函数)

在Vue3中，如果要监听对象的属性值变化，需要使用watch函数，并且监听源必须是一个getter函数。这是因为Vue3中使用了Proxy来实现响应式，并且只有在getter函数中才能正确的捕捉到属性的访问。

下面是完整的攻略，包含两条示例说明：

监听对象的属性值变化

要监听对象的属性值变化，需要使用Vue3中的watch函数。watch函数有两个参数：第一个是用于监听的对象或函数，第二个是回调函数，用于处理变化后的逻辑。

示例代码如下：

import { reactive, watch } from 'vue';

const state = reactive({ count: 0 });

watch(
  // 监听源，必须是一个getter函数
  () => state.count,
  // 回调函数，在count属性值变化后触发
  (newVal, oldVal) => {
    console.log(`count值从${oldVal}变为${newVal}`);
  }
);

// 修改count属性值，让watch函数触发
state.count = 1;

在上面的示例中，我们使用了reactive函数创建了一个响应式对象state，并且使用watch函数监听了state.count属性值的变化。当count属性值变化后，watch函数会触发回调函数，并输出变化前后的值。

需要注意的是，在监听源时，必须使用getter函数，而不能直接使用对象属性。否则，watch函数无法正确的捕捉到属性的访问，从而无法监听到属性值的变化。

监听对象的子属性值变化

如果要监听对象的子属性值变化，也需要使用Vue3中的watch函数。不同的是，在监听源时，需要使用一个函数返回子属性的值，而不是直接使用子属性访问。

示例代码如下：

import { reactive, watch } from 'vue';

const state = reactive({ 
  user: {
    name: '张三',
    age: 18
  }
});

watch(
  // 监听源，返回子属性name的值
  () => state.user.name,
  // 回调函数，在name属性值变化后触发
  (newVal, oldVal) => {
    console.log(`name值从${oldVal}变为${newVal}`);
  }
);

// 修改name属性值，让watch函数触发
state.user.name = '李四';

在上面的示例中，我们使用了reactive函数创建了一个响应式对象state，并且使用watch函数监听了state.user.name属性值的变化。当name属性值变化后，watch函数会触发回调函数，并输出变化前后的值。

需要注意的是，在监听源时，要使用一个函数返回子属性的值，而不是直接使用子属性访问。这样才能确保watch函数能够正确的捕捉到子属性的访问，从而监听到子属性值的变化。