vue3 deep报错

### 解决Vue 3 中 `deep` 选项相关的报错问题

在 Vue 3 中，监听对象或数组的变化方式有所改变。由于 Vue 3 的响应式系统进行了重构，使用 `watch` 函数时不再默认支持深层监听的对象属性变化。如果希望监视嵌套对象内部属性的变化，则需要显式指定 `{ deep: true }` 参数。

当遇到与 `deep` 有关的错误时，通常是因为未正确配置此参数或是尝试以不兼容的方式使用它。下面是一个如何正确设置深层监听的例子：

import { ref, watch } from 'vue';

const state = ref({
    nested: {
        count: 0,
        message: ''
    }
});

// 正确地使用 deep 选项来监控深层次的数据变更
watch(
    () => state.value.nested,
    (newVal, oldVal) => {
        console.log('Nested object has changed:', newVal);
    },
    { immediate: true, deep: true } // 使用 deep 和 immediate 选项
);

对于某些情况下可能发生的特定错误消息，比如 "Cannot read properties of undefined" 或者其他类似的运行时异常，这可能是由以下几个原因造成的：

- 尝试访问尚未初始化的对象路径。
- 在模板或其他地方直接引用了不存在的子属性。

为了避免这些问题，在定义初始状态时应确保所有的潜在子节点都被适当地赋初值[^1]。

另外值得注意的是，在 Vue 3 中推荐的做法是利用组合式 API 来处理复杂的逻辑和数据绑定关系，而不是依赖于旧版本中的选项式 API 。通过这种方式可以更清晰地管理应用的状态并减少不必要的复杂度。