Vue 响应式 API 中的 isRef 与 unref

梦明酱_6260

梦明酱_6260

2026-06-09

891人浏览

原创

isref用于精准判断值是否为ref实例并返回布尔值,unref则安全解包ref取.value或原样返回普通值;二者常配合实现“先识别后取值”的健壮逻辑。

vue 响应式 api 中的 isref 与 unref

isRefunref 是 Vue 3 组合式 API 中处理响应式数据类型的两个基础工具函数,它们不创建响应式,也不改变原数据,而是帮你安全识别和读取值——尤其当你不确定传入的是 ref 还是普通值时。

isRef:先判断,再决定怎么用

它只做一件事:返回一个布尔值,告诉你某个值是不是 ref 实例(包括 ref、shallowRef、computed 等具有 __v_isRef: true 标识的对象)。

  • ref(123) 返回 true
  • 123{ a: 1 }reactive({}) 都返回 false
  • 常用于分支逻辑,比如函数内部需要根据类型走不同路径

unref:一键取值,不用管它是不是 ref

它像一个“智能取值器”:如果是 ref,就自动取 .value;如果不是,就原样返回。不修改、不解构、不新建响应式对象。

Vue
Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载
  • unref(ref('hello')) → 'hello'
  • unref('hello') → 'hello'
  • unref(computed(() => count.value * 2)) → 当前计算结果
  • 注意:它对 reactive 对象无效——unref(reactive({})) 就是原对象本身,不会递归解包

为什么这两个函数经常一起用?

单独用 unref 足够简单场景;但需要做类型适配或条件逻辑时,isRef 提供了更明确的控制权。

  • 比如写一个通用默认值函数:useDefault(source, fallback),需判断 source 是否为 ref 来决定是否用 computed 包裹
  • 又比如从 props 解构后想保留响应性,但又不确定用户传的是 ref 还是原始值,先 isRef 判断,再决定是否 unref 或监听

别混淆:它们不是用来“脱离响应式”的

有人误以为 unref 能把响应式对象变成普通对象——其实不能。它只是读值,不切断响应链。真正要拿到非响应式的原始副本,得用 toRawstructuredClone

  • unref(ref({ x: 1 })) → { x: 1 },但这个对象仍是响应式对象的 .value,修改它可能影响源数据
  • toRaw(ref({ x: 1 })) → { x: 1 },得到的是原始对象快照,与响应式系统完全断开

大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vue

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
vue2.0和3.0区别
vue2.0和3.0区别

vue2.0和3.0区别:vue2的响应式原理是利⽤“Object.defineProperty()”对数据进⾏劫持结合发布订阅模式的⽅式来实现,vue3中使⽤了es6的proxy API对数据代理,实现对数据的监控。本专题为大家提供vue2.0和3.0区别的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.17

1594

5

vue3的生命周期有哪些
vue3的生命周期有哪些

vue3的生命周期:1、beforecreate;2、created;3、beforemount;4、mounted;5、beforeupdate;6、updated;7、beforedestroy;8、destroyed;9、activated;10、deactivated等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.02.23

11602

5

Vue3组合式API与组件开发实战
Vue3组合式API与组件开发实战

本专题讲解 Vue 3 组合式 API 的核心概念与应用技巧,深入分析响应式系统、生命周期管理、组件设计与复用策略。通过完整项目案例,指导前端开发者实现高性能、结构清晰的 Vue 应用,提升开发效率与代码可维护性。

2026.02.10

256

23

Vibeknow在线使用入口合集
Vibeknow在线使用入口合集

本专题汇总了Vibeknow在线创作视频的官方入口及网页版使用教程,涵盖PPT、PDF、Word等文档一键转讲解视频的核心操作,并整理了免费版水印规则与手机端浏览器访问指南,助你快速将知识内容视频化。

2026.09.21

20

20

NumPy随机数文件读写与dtype数据类型
NumPy随机数文件读写与dtype数据类型

本专题整理 NumPy 随机数、文件读写与 dtype 数据类型相关教程,覆盖 Generator/random、随机数种子、正态分布采样、npy/npz/CSV/TXT 保存读取、loadtxt/savetxt、memmap、大文件处理、astype 类型转换、结构化 dtype、整数溢出和精度丢失等场景。

2026.09.21

0

24

NumPy矩阵运算与线性代数计算
NumPy矩阵运算与线性代数计算

本专题整理 NumPy 矩阵运算与线性代数计算相关教程,覆盖矩阵乘法、dot 与 @ 运算符、逆矩阵、行列式、特征值与特征向量、SVD、线性方程组、欧氏距离、矩阵分解和大规模矩阵性能优化等内容,帮助读者掌握 np.linalg 与矩阵计算实战。

2026.09.21

0

20

NumPy广播机制数学运算与统计分析
NumPy广播机制数学运算与统计分析

本专题整理 NumPy 广播机制、数组数学运算与统计分析相关教程,覆盖广播规则、维度对齐、矩阵与数组加减除法、向量化计算、均值方差、分位数、中位数、直方图和 unique 频次统计等场景,帮助读者掌握 ndarray 高效计算与统计处理方法。

2026.09.21

0

17

NumPy数组创建索引切片与数据选择
NumPy数组创建索引切片与数据选择

本专题整理 NumPy 数组创建、索引、切片与数据选择相关教程,覆盖 np.array、zeros/ones、多维数组形状、基础切片、花式索引、布尔索引、条件筛选、视图与副本等常用场景,帮助读者系统掌握 ndarray 数据构造与高效提取方法。

2026.09.21

0

12

Aionclaw智能助手介绍
Aionclaw智能助手介绍

本专题汇总了AionClaw(AI龙虾助手)的功能介绍与在线使用入口。AionClaw是杭州趣猿人工智能有限公司推出的桌面级AI智能体,能直接在电脑上读写文件、运行脚本、操作浏览器,自动交付Word、PPT、Excel等成品。

2026.09.20

40

13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 16.7万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.4万人学习