浅谈Vue中 ref、reactive、toRef、toRefs、$refs 的用法

已于 2022-11-09 08:10:44 修改
阅读量1.7k 收藏 23
点赞数 24
分类专栏： Vue 文章标签： vue.js 前端 javascript 前端框架
于 2022-11-06 13:58:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62159662/article/details/127583855
版权

💭💭

✨： 浅谈ref、reactive、toRef、toRefs、$refs
 
💟：东非不开森的主页
 
💜: 技术需沉淀，不要浮躁💜💜
 
🌸: 如有错误或不足之处，希望可以指正，非常感谢😉
 

不知道有没有和我一样，看见那么多带ref的慢慢就晕了，所以写一个简单的总结吧嘿嘿

ref、reactive、toRef、toRefs、$refs

一、ref reactive

1.1.为什么需要ref、reactive

⭐⭐⭐
setup 函数中默认定义的变量并不是响应式的（即数据变了以后页面不会跟着变），如果想让变量变为响应式的变量，需要使用 ref 和 reactive 函数修饰变量。

  • ref 函数可以把基本类型变量变为响应式引用
  • reactive 函数可以把复合类型的变量变为响应式的引用。

 

1.2.ref reactive基本使用

⭐⭐⭐
在这里插入图片描述

ref：

  • ref用于为数据添加响应式状态
  • 获取数据值需要加.value
  • 因为reactive只能传入对象类型的参数，所以基本数据类型添加响应式状态只能用ref（ref也可以定义复杂的数据哦~）
  1. 引入ref
    在这里插入图片描述
  2. 使用ref
    在这里插入图片描述

 

查阅资料发现：ref底层使用的是proxy代理函数实现双向绑定，proxy 函数必须要接收一个对象，如果想修改 name 的值，需要使用 name.value。（这个很重要的）
 

⭐⭐⭐
reactive：

  1. 引入reactive
    在这里插入图片描述
  2. 使用reactive
    在这里插入图片描述

更推荐使用ref（当然要分情况的）
 

二、toRef、toRefs

在这里插入图片描述

⭐⭐⭐
toRef:

  • 只希望转换一个reactive对象中的属性为ref, 那么可以使用toRef的方法：
  • 获取数据值需要加.value
     
     

toRefs

  • 使用ES6的解构语法，因为一个响应式对象直接结构时，结构后的数据不再具有响应式
  • Vue为我们提供了一个toRefs的函数，可以将reactive返回的对象中的属性都转成ref；

 
基本使用：
在这里插入图片描述
选一个使用就可以，不然会很乱

 

三、$refs

在这里插入图片描述

⭐⭐⭐⭐⭐

$refs：直接获取到元素对象或者子组件实例

  • 在Vue中，我们可以给元素或者组件绑定一个ref的attribute属性；（不推荐进行DOM操作）
  • 在js中：通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值
  • 在vue中，元素绑定ref后，直接通过this.$refs就可以调用。这样可以减少获取dom节点的消耗
  1. 在元素中

在元素中绑定一个ref的attribute属性
在这里插入图片描述
通过this.$refs就可以调用
在这里插入图片描述

  1. 在组件中

子组件
在这里插入图片描述

父组件调用子组件的对象方法、获取组件实例和元素
在这里插入图片描述
如果还有补充，可以告诉我O(∩_∩)O哈哈~

东非不开森
关注
专栏目录
Vue3项目创建及reactive与ref、isRef、toRefs、shallowReactive的作用
qq_37635012的博客
10-08 727
vue3项目创建、vue3项目搭建流程、vue3里ref使用、vue3里reactive使用。
vue3 中ref、reactive、toRef、toRefs的区别
lwg112233的博客
10-17 1332
一、reactive reactive 用于为对象添加响应式状态。接收一个js对象作为参数，返回一个具有响应式状态的副本。 获取数据值的时候直接获取，不需要加.value 参数只能传入对象类型 import { reactive } from 'vue' // 响应式状态 const state = reactive({ count: 0 }) // 打印count的值 console.log(state.count) 1 2 3 4 5 6 7 8 9 二、ref ref 用于为数据添加响应式状.
【Vue3响应式】ref、reactive，以及toRefs 函数
正在解锁骑着骆驼去南极的世界
04-01 8944
Vue3中的ref和reactive都是响应式数据的实现方式。在Vue3中，我们可以使用ref来将基本数据类型包装为一个响应式对象，使用reactive将对象包装为响应式对象。本文将介绍这两种响应式数据的实现方式以及它们之间的区别。 toRefs 函数可以将一个响应式对象转换为一组响应式属性。这个函数可以用于将父组件中的响应式对象传递给子组件，并在子组件中以单独的响应式属性的形式使用它们。
一篇文章搞懂Vue3响应式：Ref和Reactive
AQiukai的博客
08-14 1254
关于vue3中ref和reactive相关知识点整理
前端Vue篇之Vue3响应式：Ref和Reactive
星辰迷上大海的博客
03-22 6478
Ref适用于简单数据管理，如计数器，通过.value访问和修改数据；而Reactive适合处理复杂对象数据，使整个对象都变成响应式，方便管理对象属性的变化。
vue中ref和reactive
qq_73882890的博客
07-03 1205
ref和reactive都是Vue 3中用于创建响应式数据的强大工具，但它们各有特点，适用于不同的场景。在选择使用哪个API时，你应该根据数据的类型、使用方式以及你的具体需求来做出决定。对于基本类型或单一对象，ref可能是一个更好的选择；而对于复杂的数据结构，如对象和数组，reactive则可能更加合适。
Vue中的ref与reactive
alive_new的博客
04-05 1027
在 Vue 中，ref 和 reactive 是用于处理响应式数据的两个不同的 API。
一文讲清楚vue3中ref、reactive、toRef、toRefs、isRef、isReactive、unref、toValue的使用
m0_57202548的博客
01-19 1516
先看一个组件我们定义了一个count，还有一个修改它的方法，并尝试在模板中通过两种方式去修改它，但结果却是页面没有任何变化。其实通过这些操作我们已经修改了count的值，只是未能得到视图的更新，所以我们看到的还是最初的值，那如何解决呢？这就引出了响应式数据ref()用于创建一个包装基本类型值的响应式对象。它将基本类型值（如数字、字符串等）转换为响应式对象（但其实也可以是引用类型），使其具有响应式特性。ref()返回一个包含value属性的对象，通过这个属性来访问和修改值。是一个响应式对象，通过ref。
Vue3中toRef的使用(彻底清楚搞懂toRef和toRefs是什么)
weixin_48952990的博客
06-06 2532
Vue3中toRef的使用
vue3中toref和torefs用法
03-21
在Vue 3中，`toRef`和`toRefs`是个非常有用的函数，用于在组合式API中处理响应式数据。 首先，让我们来介绍一下`toRef`函数。`toRef`函数接收两个参数：一个响应式对象和一个属性名。它的作用是创建一个指向响应式...
ref reactive torefs toref
01-22
ref、reactive、toRef和toRefs是Vue 3中的响应式API。它们用于在Vue组件中创建响应式数据。 1. ref：ref函数用于创建一个响应式的数据引用。它接收一个参数作为初始值，并返回一个包含value属性的对象。ref函数可以...
vue3基础ref,reactive,toRef ,toRefs 使用和理解
最新发布
weixin_41512947的博客
08-21 87
在 Vue 3 中，ref、reactive、toRef 和 toRefs 是用于响应式数据管理的重要工具。理解它们的使用方式和区别对于有效地利用 Vue 3 的响应式系统至关重要。以下是对这些工具的详细解释和示例。 一. ref ref 是 Vue 3 中用于创建响应式数据的一种方法。它主要用于处理基本数据类型（如字符串...
reactive、ref、toRef、toRefs
qq_39465116的博客
04-02 1096
reactive和ref 1.reactive 接收的数据类型：对象类型 使用: const data1 = reactive({ value: "1", name: "2" }) data1.value // 使用 结果: 作用：把参数加工成一个代理对象（proxy对象） 原理：基于Es6的Proxy实现，通过代理操作源对象，相比于ref定义的浅层次响应式数据对象，reactive定义的是更深层次的响应式数据对象。 const data1 = reactive({ valu
vues ref reactive refs toRefs
liusixsixsix的博客
10-14 188
ref ref是什么 可以生成 值类型（即基本数据类型） 的响应式数据；, 值存在ref对象的value里, 通过value来修改值; 用于模板和reactive, 也可当做dom里的ref使用 ref 不仅可以用于响应式，还可以用于模板的 DOM 元素。 使用: let a = ref(1); 取值: a.value <template> <p ref="elemRef">今天是周一</p> </template> <script>
Vue3：ref、reactive、toRef、toRefs的区别
elevenhope的博客
01-10 400
一、ref （1）ref是什么 ref 可以生成任何类型的响应式数据 ref 通过 .value 来修改值 （2）代码 <template> <div> <h2>{{ name }}{{ age }}岁</h2> <h2>改变次数：{{ state.count }}</h2> </div> </template> <script> import { ref } f
vue-ref和reactive
menghuannvxia的专栏
08-01 255
ref和reactive的区别
vue中ref与reactive区别与用法
weixin_59525879的博客
10-31 784
ref适用于处理简单的数据类型，而reactive适用于处理复杂的数据结构。无论是处理简单类型的数据还是复杂类型的数据，Vue 3提供了适用的工具来满足不同的需求。
【Vue3系列】Vue3之reactive、ref和toRefs
qq_42445025的博客
12-13 1995
Vue3之reactive、ref和toRefs 在vue2中，定义数据都是在data中，但在vue3中可以使用reactive和ref来进行数据定义。 ref ref是用来创建基础类型的响应式数据，模板默认调用value显示数据，方法中修改需要修改value的值才能修改。 ref可以用于模板和reactive，不仅可以用于响应式还可以用于模板的DOM元素。 ref是一个对象，不丢失响应式，用value属性来存储值，通过.value属性的get和set来实现响应式。 //通过ref，可以
Vue 中的 ref 与 reactive：让你的应用更具响应性（上）
你若盛开，清风自来
01-03 2034
ref和reactiveref的背景和重要性：在 Vue 2 中，通过使用v-bind和v-on等指令来实现数据的双向绑定。但是，在某些情况下，需要直接操作 DOM 元素或组件实例，这时候就需要使用ref属性。ref允许你通过引用的方式访问 DOM 元素或组件实例，从而方便地进行直接操作。在 Vue 3 中，ref有了一些改进，它现在可以引用任何类型的值，包括组件实例、函数、对象等。reactive的背景和重要性：在 Vue 2 中，响应式系统是基于对象的属性监听实现的。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

东非不开森

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

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

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

打赏作者

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

抵扣说明：

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

余额充值