Vue3中watch监视ref对象方法详解

在 Vue3 中，使用 watch 监视 ref 定义的对象类型时，可以通过以下两种方式实现：

方法一：直接监视 ref 对象并启用深度监听

javascript

import { ref, watch } from 'vue';

const obj = ref({ a: 1 });

// 监视 ref 对象，设置 { deep: true } 以监听嵌套属性变化
watch(obj, (newVal, oldVal) => {
  console.log('对象变化:', newVal);
}, { deep: true });

// 触发方式：
obj.value.a = 2;      // 触发回调（需设置 deep: true）
obj.value = { a: 3 }; // 触发回调

方法二：通过 Getter 函数监视 ref.value（推荐）

javascript

import { ref, watch } from 'vue';

const obj = ref({ a: 1 });

// 监视 ref.value（即 reactive 对象），默认启用深度监听
watch(() => obj.value, (newVal, oldVal) => {
  console.log('对象变化:', newVal);
});

// 触发方式：
obj.value.a = 4;      // 触发回调（无需 deep）
obj.value = { a: 5 }; // 触发回调

区别与选择

1. 方法一 直接监视 ref 对象：

   • 需要显式设置 { deep: true } 才能监听对象内部属性的变化。

   • 适合需要显式控制深度监听的场景。

2. 方法二 通过 Getter 监视 ref.value：

   • 自动启用深度监听，因为 ref.value 返回的是 reactive 对象。

   • 更简洁，无需额外配置，推荐使用。

总结

• 修改对象属性：两种方法均可触发回调，但方法二无需 deep。

• 替换整个对象：两种方法均会触发。

• 推荐使用方案二，代码更简洁且符合 Vue3 响应式设计。