Composition API 如何使用 unref 和 isRef 工具函数判断与处理响应式引用

unref 和 isRef 是 Vue 3 中用于安全识别和读取 ref 类型的工具函数：unref 统一取值（ref→value，非ref→原样返回），isRef 作类型守卫判断是否为 ref，二者常配合实现响应式逻辑分支。

unref 和 isRef 是 Vue 3 Composition API 中处理“类型不确定输入”的两个轻量但关键的工具函数。它们不创建响应式，也不改变数据结构，只帮你安全识别 ref 类型、统一取值逻辑。

用 unref 统一读值，避免 .value 报错

当你写的函数可能接收 ref(100) 或直接传 100 时，硬写 .value 会崩溃，完全不处理又拿不到响应式更新。unref 就是为此而生：

1. 传入 ref(42) → 返回 42
2. 传入 computed(() => count.value * 2) → 返回当前计算结果
3. 传入普通字符串 'hello' 或数字 99 → 原样返回
4. 对 reactive({}) 调用 unref，返回的是 Proxy 对象本身，不会解包内部属性

它等价于 isRef(val) ? val.value : val，但你不用自己写判断——一行 unref 就搞定取值。

用 isRef 做类型守卫，实现分支逻辑

当你要根据输入是否为 ref 来决定是否监听、是否包裹 computed、是否做副作用时，isRef 提供明确的布尔判断：

1. 返回 true：ref(1)、shallowRef('a')、computed(() => x) 等所有带 __v_isRef: true 标识的对象
2. 返回 false：原始值（123、'ok'）、reactive 对象、普通对象、数组
3. 在 TypeScript 中，isRef 可作为类型守卫，让编辑器自动推导后续代码中 val 的类型为 Ref

例如封装一个防抖函数：只有传入的是 ref 才 watch 其变化；传普通值就直接用，不启动响应式监听。

两者配合：先判断，再取值或定制行为

很多实用场景需要二者协作，比如自定义默认值 Hook：

1. 若 source 是 ref，就用 computed 包裹，保持响应式联动
2. 若 source 是普通值，就直接返回，但 fallback 仍需 unref（因为它也可能为 ref）
3. 内部逻辑依赖 isRef 分支，取值统一走 unref，既健壮又清晰

这种“识别 + 安全读取”模式，在 props 解构、校验工具、状态合并等通用逻辑中非常常见。

注意边界：unref 不递归，也不脱离响应式

别误以为 unref 能把响应式对象变“普通”。它只解一层：

1. ref(ref(42)) → 返回内层 ref，不是 42
2. unref(reactive({ x: 1 })) → 返回 Proxy，不是 { x: 1 }
3. 真正要获取非响应式的原始副本，得用 toRaw 或 structuredClone

需要深度解包或支持函数执行？Vue 3.3+ 推荐用 toValue 替代 unref。