Vue 3 中 `ref` 的“浅监听”行为解析：是误解还是真相？

在 Vue 3 的响应式系统中，ref 和 reactive 是两个核心 API，用于实现数据的响应式更新。然而，开发者在使用 ref 包装对象或数组时，有时会遇到"嵌套属性变更不触发更新"的问题，进而误认为 ref 是"浅监听"。本文将深入探讨 ref 的响应式机制，解析其是否真的属于"浅监听"，并给出最佳实践方案。

---

1. ref 的基本原理：包装值 + 响应式转换

ref 的核心作用是将一个值（基本类型或引用类型）包装成一个响应式对象，其内部结构如下：

const count = ref(0); // { value: 0 }
const obj = ref({ nested: { prop: 'old' } }); // { value: Proxy({ nested: { ... } }) }

• 基本类型 （如 number、string）：ref 直接通过 value 属性封装，并通过 getter/setter 实现响应式。
• 引用类型 （如 object、array）：ref 的 value 属性会被 reactive() 转换为 Proxy 对象，理论上支持深度监听。

---

2. 为什么 ref 会被误认为"浅监听"？

2.1 直接修改嵌套属性的"陷阱"

当使用 ref 包装一个对象后，直接修改嵌套属性（如 obj.value.nested.prop = 'new'）可能不会触发视图更新。这是因为：

• Proxy 的拦截范围 ：reactive 生成的 Proxy 只能拦截对对象本身的直接操作（如属性读写、赋值、删除等），但无法检测到通过引用修改嵌套属性的行为。

• 示例 ：

  const obj = ref({ nested: { prop: 'old' } });
  obj.value.nested.prop = 'new'; // 视图未更新！

  虽然 nested 已被 reactive 转换为响应式对象，但直接修改 prop 绕过了 Proxy 的拦截机制。

2.2 与 reactive 的对比

• reactive 直接对对象进行代理，强制深度监听 ，且无法通过配置关闭深度监听（deep: false 无效）。
• ref 的监听行为更依赖 Proxy 的拦截机制，因此在某些场景下可能表现出类似浅监听的效果。

---

3. 如何实现真正的"深度监听"？

3.1 方法 1：使用 reactive 包装嵌套对象

将嵌套对象单独用 reactive 包装，确保其响应式：

const nested = reactive({ prop: 'old' });
const obj = ref({ nested });
nested.prop = 'new'; // 触发更新！

3.2 方法 2：替换整个对象（触发 Proxy 拦截）

通过 Object.assign 或展开运算符替换整个对象，强制触发 Proxy 的拦截：

const obj = ref({ nested: { prop: 'old' } });
obj.value = { ...obj.value, nested: { ...obj.value.nested, prop: 'new' } }; // 触发更新

3.3 方法 3：使用 watch 的 deep 选项

监听 ref 时，通过 deep: true 强制深度监听：

watch(
  () => obj.value,
  (newVal) => {
    console.log('嵌套属性变更:', newVal);
  },
  { deep: true }
);

3.4 方法 4：shallowRef + triggerRef（明确浅监听场景）

如果确实需要浅监听（如避免递归监听大型对象），可使用 shallowRef，并通过 triggerRef 手动触发更新：

const shallowObj = shallowRef({ nested: { prop: 'old' } });
shallowObj.value.nested.prop = 'new'; // 不会触发更新
triggerRef(shallowObj); // 手动触发更新

---

4. 总结：ref 是"浅监听"吗？

• ref 并非严格浅监听 ：
  其默认行为对基本类型和引用类型的顶层属性是响应式的，但直接修改嵌套属性可能因 Proxy 拦截机制的限制而未触发更新。
• 类似浅监听的原因 ：
  直接修改嵌套属性时，Proxy 无法自动检测变更，导致视图未更新。
• 解决方案 ：
  • 使用 reactive 包装嵌套对象。
  • 替换整个对象或使用 watch 的 deep 选项。
  • 在明确需要浅监听的场景下，使用 shallowRef + triggerRef。

---

5. 最佳实践建议

1. 优先使用 reactive 包装复杂对象 ：
   如果数据结构包含多层嵌套，直接使用 reactive 可以避免 ref 的潜在问题。
2. 避免直接修改嵌套属性 ：
   使用不可变更新（如展开运算符、Object.assign）替换整个对象。
3. 明确监听需求 ：
   • 需要深度监听？用 ref + deep: true 或 reactive。
   • 需要浅监听？用 shallowRef + triggerRef。

通过理解 ref 的响应式机制，我们可以更精准地控制数据更新行为，避免因误解导致的开发陷阱。