在 Vue 3 的组合式 API 中，如何正确地监听一个响应式对象的深层属性变化？

在 Vue 3 的组合式 API 中，如何正确地监听一个响应式对象的深层属性变化？

回答：
在 Vue 3 的组合式 API（Composition API）中，若要监听一个响应式对象的深层属性变化，应使用 watch 函数并设置 deep: true 选项。

示例代码：

import { ref, watch } from 'vue';

const user = ref({
  name: 'Alice',
  address: {
    city: 'Beijing',
    street: 'Chaoyang'
  }
});

watch(user, (newVal, oldVal) => {
  console.log('user changed:', newVal);
}, { deep: true });

解析：

• 默认情况下，watch 对 ref 包裹的对象仅监听其引用变化，不会监听对象内部属性的变化。
• 通过传入 { deep: true } 选项，Vue 会对对象进行深度监听，当对象内部任意嵌套属性发生变化时，回调函数都会被触发。
• 注意：深度监听有一定性能开销，应避免对大型或频繁变化的对象无节制使用。
• 如果只想监听对象的某个特定深层属性（如 user.value.address.city），更高效的做法是直接监听该路径，例如使用 watch(() => user.value.address.city, callback)。