Vue3 isRef/isReactive/isProxy响应式类型判断工具

在 Vue3 开发中，组件间传递的数据类型多种多样，编写通用函数或处理解构后的数据时，往往需要明确判断变量是否具有响应式能力。直接通过 typeof 或 instanceof 无法准确识别 Vue 内部封装的代理对象。使用 Vue 提供的 isRef、isReactive 和 isProxy 工具函数，可以精准区分普通数据、Ref 对象和 Reactive 对象。

1. 使用 isRef 判断 Ref 对象

isRef 用于检查一个值是否是由 ref 或 computed 创建的 ref 对象。在处理可能包含 ref 的通用逻辑函数时，这是最常用的判断工具。

执行以下步骤来使用 isRef：

1. 打开 Vue 组件文件或工具函数文件（如 utils.js）。
2. 导入 isRef 和 ref 函数。

   import { isRef, ref } from 'vue';

3. 编写测试代码，定义一个 ref 变量和一个普通变量。

   const count = ref(0);
   const message = 'Hello World';

4. 调用 isRef 进行判断。

   console.log(isRef(count));    // 输出: true
   console.log(isRef(message));  // 输出: false

核心逻辑：只有当变量是 RefImpl 或 ComputedRefImpl 的实例时，isRef 才会返回 true。

2. 使用 isReactive 判断 Reactive 对象

isReactive 用于检查一个对象是否是由 reactive 创建的响应式代理，或者是否是由 reactive 创建的嵌套对象。注意，它不会自动解包 ref，即 isReactive(refObj) 返回 false，但 isReactive(refObj.value) 可能返回 true（如果 value 是对象）。

执行以下步骤来使用 isReactive：

1. 导入 isReactive 和 reactive 函数。

   import { isReactive, reactive } from 'vue';

2. 创建一个响应式对象和一个普通对象。

   const state = reactive({ count: 0 });
   const plainState = { count: 0 };

3. 验证对象的响应式状态。

   console.log(isReactive(state));     // 输出: true
   console.log(isReactive(plainState)); // 输出: false

4. 测试嵌套属性。

   const nested = reactive({ detail: { id: 1 } });
   console.log(isReactive(nested.detail)); // 输出: true

3. 使用 isProxy 判断代理对象

isProxy 检查对象是否是由 reactive、readonly、shallowReactive 或 shallowReadonly 创建的代理。这是一个底层的检查，通常用于确认对象是否被 Vue 的响应式系统包裹。

执行以下步骤来区分 isProxy 与 isReactive：

1. 导入 isProxy、reactive、ref、readonly。

   import { isProxy, reactive, ref, readonly } from 'vue';

2. 构建不同类型的数据实例。

   const rObj = reactive({ a: 1 });
   const rOnly = readonly({ b: 2 });
   const rRef = ref(0);
   const plain = { c: 3 };

3. 对比检查结果。

   console.log(isProxy(rObj));   // true (reactive 创建)
   console.log(isProxy(rOnly));  // true (readonly 创建)
   console.log(isProxy(plain));  // false (普通对象)
   
   // ref 本身是一个对象，但不是 Proxy，它的 value 属性才是（如果是对象）
   console.log(isProxy(rRef));           // false
   const objRef = ref({ d: 4 });
   console.log(isProxy(objRef.value));   // true (value 是 reactive 创建的代理)

4. 判断逻辑对比与选择

为了在实际开发中快速选择正确的工具，请参考下表对比三个方法的特性。

5. 实战场景：安全获取值的工具函数

在编写通用函数时，入参可能是普通数据，也可能是 ref。我们需要一个函数来安全地获取值，无论它是否为 ref。

编写一个名为 getValue 的通用工具函数：

1. 定义函数逻辑。

   import { isRef } from 'vue';
   
   /**
    * 获取变量的原始值
    * @param {any} val - 输入变量
    * @returns {any} - 返回原始值
    */
   function getValue(val) {
     // 如果是 ref，返回 .value；否则直接返回
     return isRef(val) ? val.value : val;
   }

2. 测试函数健壮性。

   const numRef = ref(10);
   const numPlain = 20;
   
   console.log(getValue(numRef));    // 输出: 10
   console.log(getValue(numPlain));  // 输出: 20

6. 响应式类型判断流程

当面对一个未知变量，需要确定其类型以便进行下一步操作时，遵循以下判定流程。