【Vue3 知识第六讲】ref、 shallowRef、unref、isRef 等系列知识应用

最新推荐文章于 2025-05-05 10:06:38 发布
最新推荐文章于 2025-05-05 10:06:38 发布
阅读量3.7k 收藏 5
点赞数
分类专栏： 前端开发知识 Vue 文章标签： javascript vue.js ref toref 数据引用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39335404/article/details/132663417
版权

文章目录

一、ref()

ref() 方法接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value

ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。

如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客

了解本专栏 订阅专栏 解锁全文 超级会员免费看
【Vue3】Ref与Reactive的区别
shineCxl的博客
04-10 590
基本类型的数据使用ref，引用类型根据赋值方式来决定使用ref还是reactive如果是要直接替换整个对象，也就是赋值的方式，就使用ref如果是要修改对象的属性，就使用reactive因为ref.value替换对象仍能保持响应式，而reactive不行。
【Vue3源码实现】Ref isRef unRef proxyRefs实现
weixin_63625059的博客
05-14 909
在上篇文章中 我们了解了响应式原理，并在最后实现了reactive。上文链接🔥🔥🔥Vue3响应式原理实现与track和trigger依赖收集和触发依赖在我们的日常业务中，我们有可能需要将一个基础数据类型的值也转换成响应式的，而reactive只能代理对象，我们需要对基础数据类型的值也进行读写操作的拦截，但 Proxy 无法实现对基础数据类型值读写操作的拦截。所以Vue设计了Ref,以及相关api本篇文章实现下Ref及相关APIisRefunRefproxyRefs。
Vue3 中 shallowRef 的神奇用法，让你的代码更加优雅！
最新发布
Jacklx888的博客
05-05 315
✨宝子们，今天给大家带来一个Vue3中的神器——shallowRef！如果你已经厌倦了深度响应式的繁琐操作，那么shallowRef绝对是你的菜。让我们一起来看看它是如何让我们的代码变得简洁又高效的吧！
【Vue3】Ref 和 ShallowRef 的区别
正在解锁骑着骆驼去南极的世界
03-05 2605
Ref 是 Vue 3 中的一个新的基本响应式数据类型，它允许我们包装任意的 JavaScript 值，并且在数据变化时发出通知。Ref 提供了一个 .value 属性来访问其内部的值，同时还提供了一些额外的 API 来处理数据。Ref 可以被用于跟踪单个值的变化，并在需要时自动触发重新渲染。ShallowRef 与 Ref 类似，它也是用来包装值并监听变化的。但是，与 Ref 不同的是，ShallowRef 会对其包装的值进行浅层的响应式转换。
彻底弄清Vue3 中ref、toRef、toRefs、isRef、unref等
油墨香^-^的博客
05-09 6284
ref(): 接收一个值并返回一个响应式的对象，可以使用.value 属性来访问和修改这个值。toRef(obj, key): 根据一个响应式对象中的一个属性，创建一个响应式的 ref，并且该 ref 和原对象中的属性保持同步。-toRefs(obj): 将一个响应式对象转换成一个普通对象，其中普通对象的每个属性都是响应式的 ref。isRef(value): 判断某个值是否是 ref 对象。unref(value): 用于解除响应式引用。
Vue原理之ref与shallowRef
youhebuke225的博客
10-08 511
专栏目录请。
[深入vue3之refs] ref、unref、toRef、toRefs、isRef、customRef、shallowRef、triggerRef等使用与讲解
从今年开始写写博客~~
01-10 2294
本章涉及的composition api： ref、unref、toRef、toRefs、isRef、customRef、shallowRef、triggerRef refs api中的重点为：ref、toRefs、shallowRef、customRef，其次是 isRef 等。 ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 `.value` property，指向该内部值。 如果将对象分配为 ref 值，则它将被 `reactive` 函数处理为
vue3中shallowRef和ref的实现
longtengg1的博客
12-28 1381
1、对象中的get和set方法 var a={ value_:'123', get value(){ console.log('呵呵') return this.value_ }, set value(val){ console.log('哈哈',val) this.va
Vue3 响应式工具函数isRef()、unref()、isReactive()、isReadonly()、isProxy()
咸鱼滚滚
09-10 1021
isRef()：检查某个值是否为 ref。 isRef函数接收一个参数，即要判断的值。如果该参数是由ref创建的响应式对象，则返回true；否则，返回false。
一起学Vue3源码，实现最简Vue3【12】 - 实现 isRef 和 unRef 功能
Aybuai的博客
08-30 768
实现isRef 和 unRef 功能
一文讲清楚vue3中ref、reactive、toRef、toRefs、isRef、isReactive、unref、toValue的使用
m0_57202548的博客
01-19 1890
先看一个组件我们定义了一个count，还有一个修改它的方法，并尝试在模板中通过两种方式去修改它，但结果却是页面没有任何变化。其实通过这些操作我们已经修改了count的值，只是未能得到视图的更新，所以我们看到的还是最初的值，那如何解决呢？这就引出了响应式数据ref()用于创建一个包装基本类型值的响应式对象。它将基本类型值（如数字、字符串等）转换为响应式对象（但其实也可以是引用类型），使其具有响应式特性。ref()返回一个包含value属性的对象，通过这个属性来访问和修改值。是一个响应式对象，通过ref。
vue3学习教程第四节（ref以及ref相关api）
刺客-Andy 的博客
03-12 1183
vue3 中ref以及ref相关内容，isRef 、unref、shallowRef、triggerRef、customRef
vue3 ref与shallowRef共同使用的问题
qq_61398960的博客
09-09 546
讲道理，这个shallowRef在使用的时候，如果msg2.value.foo = ‘qiqi’，只是修改其中内容不会发生更新，但是，如果我们在改变shallowRef的时候同时修改了ref，并且引起视图更新， 那么shallowRef也会触发更新，为什么会这样呢？最后调用的都是triggerRefValue这个方法，这个方法就是更新视图的方法，所以会出先上面的情况，我们使用ref会调用triggerRefValue更新视图，会导致我们shallowRef的数据一并被更。先从github下载vue源码。
vue3核心语法【二】ref系列：ref与reactive、shallowRef与shallowReactive、toRefs与toRef、storeToRefs、ref标签
zxz947462113的博客
05-28 2546
vue3核心语法之ref系列：ref与reactive用法和区别、shallowRef与shallowReactive、toRefs与toRef、storeToRefs、ref标签
ref&shallowRef&customRef&toRef&toRefs&reactive理解
橘子花会开
10-10 523
ref&shallowRef&customRef&toRef&toRefs&reactive理解
ref与shallowRef区别
LiuMH2011的专栏
03-24 7416
vue3组合式API-ref与shallowRef区别
vue3中的ref、isRef、shallowRef、triggerRef和customRef
m0_60189088的博客
04-24 1325
接受一个参数值并返回一个响应式且可改变的ref对象。ref对象拥有一个指向内部值的单一属性，指向内部值。例：此时，页面上的str1也跟着变化使用ref获取dom。
Vue3:响应式进阶（shallowRef、triggerRef、customRef、shallowReactive、shallowReadonly、toRaw）
weixin_62364503的博客
09-22 1802
Vue3:响应式 API：进阶
vue3 shallowRef 和 ref
qq_44845659的博客
07-16 156
vue3 shallowRef 和 ref //定义一个shallowRef函数 function shallowRef(target){ return { //保存target数据保存起来 _value:target, get value(){ console.log(‘劫持到了读取数据’) return this._value; } set value(val){ console.log(‘劫持到了修改数据，准备更新界面’,val) this._value = val } } } //定义一个ref函数
vue3 isRef
07-27
在Vue 3中，isRef是一个用于检查某个值是否为ref的函数。它主要用于类型检测，可以判断一个值是否为Ref类型。\[1\]在Vue 3的模板中，可以使用isRef来检查一个变量是否为Ref类型，并在模板中显示相应的结果。\[2\]此外，isRef还可以用作类型守卫，可以在代码中根据isRef的返回结果来进行类型收窄操作。\[3\] #### 引用[.reference_title] - *1* *3* [vue3中的工具函数 isRef() 和 unref()](https://blog.csdn.net/m0_46390103/article/details/127120967)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue3 isRef](https://blog.csdn.net/HH18700418030/article/details/124251909)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MagnumHou

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值