在 Vue 中，当需要监听一个对象内部属性的变化时，通常需要启用深度监听。请问如何实现？其原理是什么？在哪些场景下应使用深度监听，又有哪些潜在的注意事项？
考察说明
考查对 Vue 响应式系统中 watch 深度监听机制的理解和应用能力。
回答思路
- 【回答框架 1】在 Vue 2 中，通过 watch 选项监听对象时，默认只监听引用变化，内部属性变化不会触发。要实现深度监听，需要在 watch 对象中为目标属性添加 handler 函数和 deep: true 选项，这样会递归遍历对象内部所有属性并建立依赖，任何属性变化都会触发回调。
- 【回答框架 2】在 Vue 3 中，watch API 可以直接传入响应式对象（如 ref 或 reactive 创建的对象），当监听 reactive 对象时，默认就会深度监听其内部变化，无需额外配置。但若监听的是 ref 包裹的普通对象，仍需要设置 { deep: true } 选项。
- 【回答框架 3】深度监听适用于需要响应对象内部嵌套属性变化的场景，例如表单中嵌套对象字段的校验、复杂配置对象的动态响应等。但需注意，深度监听会递归遍历对象，对大型对象或高频更新的数据可能带来性能开销，应谨慎使用。
- 【回答框架 4】实现深度监听的原理基于 Vue 的响应式系统：在初始化时通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）递归劫持对象属性，深度监听就是在收集依赖时递归遍历所有层级，使所有嵌套属性都成为依赖，从而在任意层级变化时触发回调。
- 【回答框架 5】使用深度监听时，应避免监听整个大型对象，而应尽量具体到需要监听的字段；同时注意在回调中避免修改同一对象导致无限循环，合理使用 immediate 选项以处理初始值。对于不需要深层响应的场景，可考虑使用 computed 或拆分为多个具体监听。
- 【关键点 1】Vue 2 中通过 deep: true 选项实现深度监听，Vue 3 中监听 reactive 对象默认深度且不可配置为浅层。
- 【关键点 2】深度监听会递归遍历对象，可能带来性能开销，应避免对大型数据使用。
- 【关键点 3】在回调中修改被监听对象可能触发无限循环，需谨慎设计逻辑。
- 【关键点 4】优先监听具体字段而非整个对象，以优化性能。
- 【关键点 5】深度监听基于 Vue 响应式系统的依赖收集机制，递归建立嵌套属性的依赖关系。
- 【易错点 1】深度监听会导致对象所有嵌套属性都被递归追踪，性能开销大，尤其对大型或高频更新的数据可能导致卡顿。
- 【易错点 2】在深度监听回调中修改对象内部属性可能触发再次回调，造成无限循环，需添加条件判断或使用标志位。
- 【易错点 3】Vue 3 中监听 reactive 对象默认深度且不能关闭，若需仅监听顶层变化需使用 getter 函数返回浅层引用。