vue3 如何使用deep

### Vue3 中 `deep` 深度监听的使用方法

在 Vue3 中，为了实现对对象内部属性变化的响应，可以利用 `watch` 的选项参数来设置深度监听。当处理复杂的嵌套数据结构时，普通的浅层监听无法捕捉到深层次的变化，而深度监听则能有效解决这一问题。

对于需要监控的对象或数组类型的变量，在定义 `watch` 时加入 `{ deep: true }` 配置项即可启用深度监听功能[^2]。这使得每当被观察的目标内任意一层级的数据发生变化时都会触发回调函数执行相应逻辑。

#### 示例代码展示
下面是一个简单的例子展示了如何在一个组件里针对一个包含多个字段的对象实施深度监听：

<template>
  <!-- 组件模板 -->
</template>

<script setup>
import { ref, watch } from 'vue';

// 定义一个具有多层结构的数据对象
const formData = ref({
    name: '',
    address: {
        city: '',
        street: ''
    }
});

// 设置深度监听器
watch(formData.value.address, (newAddress, oldAddress) => {
    console.log('地址信息发生了更改');
    console.log('新的地址:', newAddress);
    console.log('之前的地址:', oldAddress);
}, { deep: true });

// 或者更简洁的方式直接监听整个formData
watch(() => ({ ...formData.value }), (newFormData, oldFormData) => {
    console.log('表单数据整体发生改变');
    console.log('最新状态', newFormData);
    console.log('之前的状态', oldFormData);
}, { deep: true });
</script>

上述代码片段中，第一个 `watch` 只会关注 `address` 属性下的具体变动情况；第二个则是对整个 `formData` 对象进行了全面监测，只要其中任何一个子元素更新就会激活对应的处理器[^4]。