Vue3 如何使用 watch 监听对象属性值

在 Vue3 的开发过程中，watch 是一个强大的工具，它能够有效地监听数据的变化并执行相应的操作。当我们需要对对象的属性值进行监听时，掌握正确的使用方法至关重要。

要明确 watch 的基本语法。在 Vue3 中，可以通过 watch 函数来监听一个响应式数据的变化。对于监听对象属性值，我们有多种方式。

一种常见的情况是监听一个简单对象的单个属性。例如，有一个响应式对象 data，其中包含属性 message。我们可以这样使用 watch：

import { ref, watch } from 'vue';
const data = ref({
    message: '初始值'
});
watch(() => data.value.message, (newValue, oldValue) => {
    console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
});
// 当 data.value.message 的值发生改变时，上述回调函数就会执行

这里，watch 的第一个参数是一个回调函数，返回需要监听的属性。第二个参数是一个回调函数，接收新值和旧值，在属性值变化时执行相应逻辑。

如果要监听对象的多个属性，可以传递一个包含多个监听源的数组。比如：

const data = ref({
    message: '初始值',
    count: 0
});
watch([() => data.value.message, () => data.value.count], ([newMessage, newCount], [oldMessage, oldCount]) => {
    console.log(`message 新值: ${newMessage}, 旧值: ${oldMessage}`);
    console.log(`count 新值: ${newCount}, 旧值: ${oldCount}`);
});

这样，当 message 或 count 任何一个属性值变化时，回调函数都会执行。

另外，对于深层监听对象的属性变化，watch 也提供了相应的支持。默认情况下，watch 只会浅层监听对象的属性。若要深层监听，可以通过设置 deep 选项为 true。例如：

const complexData = ref({
    inner: {
        value: '深层值'
    }
});
watch(() => complexData.value, (newValue, oldValue) => {
    console.log('深层属性变化');
}, { deep: true });

通过上述方法，在 Vue3 开发中就能灵活运用 watch 来监听对象属性值的变化，从而实现各种复杂的业务逻辑，提升应用的交互性和稳定性。