Ref, Reactive, Shadowref,Shadowreactive一次分清楚

最新推荐文章于 2025-08-31 10:07:10 发布
原创 最新推荐文章于 2025-08-31 10:07:10 发布 · 1.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

本文详细探讨了Vue3中的ref、reactive、shadowRef及其区别。大部分场景下，ref是首选，它提供了一致的引用和.value语法，适用于一般类型的响应式需求。然而，当需要对对象的每个属性独立响应或优化性能时，reactive和shadowRef各有用武之地。文章指出，并非所有数据都需要定义为响应式，只有在需要更新界面时才需如此。同时，通过实例展示了何时使用reactive会导致界面不更新的问题。

自从用vuepress 2开发OpenAPI平台百家饭以来，按照官方指引，我们一直使用ref函数，在composition api里面创建变量引用。后来陆续了解到shadowref，reactive，shadowreactive函数，就有点分不清楚了，今天争取一篇文章分清楚这几个函数的区别。

包含子属性 可传入一般类型 子属性引用类型
ref 包含 能 统一引用，所有属性共享一个响应对象（一个属性变动，所有用到该应用属性的地方都要更新）
shadowRef  不包含         能 统一引用，所有属性共享一个响应对象（一个属性变动，所有用到该应用属性的地方都要更新）
reactive 包含 不能，只接受objarray 分别引用，每个属性是一个独立的reactive对象
shadowReactive 不包含 不能，只接受objarray 分别引用，每个属性是一个独立的reactive对象

通常情况下，可以无脑使用ref

查询了多篇文章之后，一个结论是，大部分情况

最低0.47元/天 解锁文章
15.使用ref比reactive更好的几种场景
粉丝们务必加入微信粉丝群
08-28 1488
经常会感到迷茫，有的小伙伴可能会想，基本数据类型用。如果，你还知道哪些，欢迎留言补充。更好，这都很难说，还是得看具体的场景。也可以用于对象，所以，到底是。在 Vue3 中，对于使用。最后一个是，我们可以将。这里，有几情况： 用。...
vue3 响应式数据shallowRef,shallowReactive
jieweiwujie的博客
03-19 362
1.创建一个响应式代理，它跟踪其自身property的响应性，但不执行嵌套对象的深层响应式转换 (暴露原始值)2.相对于reactive只有最外层的属性是响应的只能修改下面的brand 和options第一层。
Vue中的shadowRef与ref的区别
最新发布
XGStudio2024的博客
08-31 154
shadowRef与ref的区别
面试总结第二弹
liyane1993的博客
03-10 208
面试经验分享
【Vue3 知识第六讲】ref、 shallowRef、unref、isRef 等系列知识应用
前端知识分享喵
09-04 3839
ref、 shallowRef、unref、isRef 等系列知识应用
手写shadowRef和ref
yangyanqin2545的博客
12-06 1795
手写shadowRef和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 }
手写shadowReactive和reactive
yangyanqin2545的博客
12-06 492
手写shadowReactive和reactive //定义一个reactiveHandler处理对象 const reactiveHandler = { //获取属性值 get (target,prop){ const result = Reflect.get(target,prop); console.log('拦截了读取数据',prop,result); return result; } //修改属性值或者添加属性 set (target,prop,value){ const result =
vue3 中 ref和reactive、shallowRef和shallowReactive，toRaw 和 markRaw的区别
为了WLB努力
03-30 952
在 Vue 3 中，`ref`、`reactive`、`shallowRef`、`shallowReactive` 是用于创建响应式数据的方法，而 `toRaw` 和 `markRaw` 则是用于处理响应式数据的辅助函数。让我分别解释它们的区别：
Vue reactive ref v-bind 语法示例演示代码
07-17
Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码...
Ref Effect baseHandler reactive Proxy Vue 3
01-04
`ref` 主要用于创建可响应的值，它可以是一个基本类型或者一个对象。当你对 `ref` 创建的值进行修改时，Vue 会自动追踪变化并更新视图。而 `reactive` 函数则是用来创建一个响应式的对象，它可以响应对象属性的添加...
【Vue】ref，reactive 响应式引用的用法和原理（1）
看花容易绣花难
10-30 1096
ref，reactive 响应式引用的用法和原理（1）
Vue3 shallowRef 和 shallowReactive
大家好，我是+V
07-08 573
嗯，怎么说呢，其实这两个函数并不是很常用，在开发过程中基本上用不到，但是呢，我不写我又感觉少点啥，所以说就简单的说一下吧，其实不看也可以哈。上面说了是不是还是没看懂？没关系哈，先记住上面三条，然后详细的说一下。我们在之前的博客讲过 ref 函数和 reactive 函数，他们的作用是将数据转换成响应式的数据，在修改数据的时候，可以将数据实时展示在页面上，基本数据也好，对象也好，都是这样。但是有一个问题呀，我们在把数据改为响应式数据的时候，不管是用 ref 函数还是使用 reactive 函数，他俩都是深度监
vue3中的shallowReactive
u013594477的专栏
11-26 1301
1、shallowReactive监听了第一层属性的值，一旦发生改变，则更新视图;其他层，虽然值发生了改变，但是视图不会进行更新 <template> <h3>shadowReactive:</h3> <p class="state1">{{state}}</p> <button class="btn1" @click="change1">change1</button> <button
reactive和ref区别
m0_68703022的博客
05-06 282
reactive使用Proxy实现数据代理，并且通过Reflect操作源对象内部的数据。ref通过Object.defineProperty()的get和set实现数据代理。ref也可以用来定义对象或者数组类型的数据，内部会通过reactive转为代理对象。ref操作数据需要.value，template模板中不需要。reactive用来定义：对象（或者数组）类型数据。一、vue3中reactive与ref的区别。reactive都不需要,value。ref通常用来定义基本类型数据。
ref与shallowRef区别
LiuMH2011的专栏
03-24 7985
vue3组合式API-ref与shallowRef区别
Vue 3 响应式高阶用法之 `shallowRef()` 详解
訾博（ZiBo）的博客
07-27 2322
在 Vue 3 中，响应式系统是其核心特性之一。通过响应式系统，开发者可以轻松地管理和更新应用状态。然而，对于一些特殊场景，我们可能需要更细粒度的控制。这时，就派上用场了。本文将详细介绍的使用场景、基本使用、功能详解、最佳实践及案例，帮助读者更好地理解和应用这一高阶用法。shallowRef使用shallowRefuser: {age: 25},});在这个例子中，state对象的第一层属性是响应式的，但user对象的属性不会被深度转换为响应式。shallowRef。
Vue 3 ref 和 reactive 完整指南
挨踢星球
08-03 1004
这两个 API 是 Vue 3 中非常强大的工具，它们使得响应式编程变得更加简单和直观。它创建了一个新的代理对象，该对象拦截了原始对象的操作，并在读取或修改属性时触发依赖更新。这两个 API 提供了创建和管理响应式数据的新方法。的内部实现基于一个封装了实际值的对象，这个对象实现了。是响应式系统的核心部分，用于收集依赖和触发更新。用于将一个响应式对象中的某个属性转换为。用于标记一个对象使其不再成为响应式的。用于创建一个基本类型的响应式引用。用于创建一个对象类型的响应式引用。用于获取一个响应式对象的原始值。
笔记：Vue 3.0
我才是真的李成贤的博客
03-09 1481
笔记：Vue 3.0
Vue3中shallowRef和shallowReactive的使用？
weixin_59763367的博客
04-13 846
shallowReactive和shadowRef就是浅层的reactive和ref。可以理解成，shallowReactive只能处理引用类型，只能监听对象的最外层属性，如果深度属性发生改变，是监听不到的，没法实现响应式。shallowRef和ref不同，只能处理基本类型，不能处理引用类型。处理基本类型的时候和ref一样。
ref reactive
07-14
Vue3中的ref和reactive都是响应式数据的实现方式，但是它们有一些区别： 1. ref只能用于包装基本类型的数据，如数字、字符串等，而reactive可以用于包装任意类型的数据，包括对象、数组等。 2. ref返回的是一个包装后的对象，而reactive返回的是一个响应式的Proxy对象。 3. ref可以直接通过.value属性获取包装的值，而reactive需要通过访问属性或者下标来获取值。 4. ref的更新是通过赋值来实现的，而reactive的更新是通过修改属性或者下标来实现的。 总的来说，ref适用于包装基本类型的数据，而reactive适用于包装任意类型的数据，并且提供了更灵活的访问和更新方式。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

百家饭AI

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

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

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

打赏作者

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

抵扣说明：

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

余额充值