一聚教程网:一个值得你收藏的教程网站

热门教程

Vue3理解ref toRef和toRefs的区别代码解析

时间:2022-06-29 01:59:12 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下Vue3理解ref toRef和toRefs的区别代码解析,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

一、基础

1.ref

(1) 生成值类型的响应式数据, 通过 .value修改值





上面这段代码,定义了一个ageRef变量,并每秒将ageRef加1,页面展示的数值也会加1.

(2) 可用于reactive中

将上面的代码改动如下, 引入reactive定义变量,将ref定义的变量引入reactive中, 模板中展示reactive的变量. 最后的效果和上面(1)的一样





(3) 可用于获取Dom





上面的代码中,使用toRef将state的age属性变成一个响应式变量,然后在1秒后将state的age值变为20,此时ageRef也会变成20;在2秒后将ageRef的值变为21,此时state的age值也会变成21,说明了两者保持相互引用关系

toRef针对的是响应式,针对的不是普通对象,如果用于非响应式,产出的结果不具有响应式

3.toRefs

将一个响应式对象转为普通对象

对象的每一个属性都是对应的ref

两者保持引用关系

我们来看下面这段代码





上面的代码中,使用toRefs将state转变成一个普通对象,这时候就可以直接返回stateRefs,这时候在template就可以直接调用name和age。然后在1秒后将state的age值变为20,此时页面中的age也会变成20;在2秒后将stateRefs中的name的值变为21,此时页面中的age值也会变成21,说明了两者保持相互引用关系

toRefs将响应式对象变成普通对象后,每一个属性都具有响应式ref,此时需要使用 .value才能获取其值

4.最佳的使用方式

reactive做对象的响应式,ref做值类型响应式

setup中返回toRefs(state), 或者toRef(state, 'xxx')---(这样就能够在template中不使用state.xxx)

ref的变量命名都用xxxRef

合成函数返回响应式对象时,使用toRefs

例如:





上面的代码,test函数中定义了响应式对象state,并通过toRefs将其转为普通对象并返回,这时候可以结构赋值,并且值是响应式的

二、深入

1.为什么需要ref

在上面我们讲到,使用reactive和toRef也可以将值类型转换成响应式的,为什么还需要ref呢?

值类型不具有响应式(proxy)

setup()、computed()...都可能返回值类型,如果vue不定义ref,用户需要响应式的值类型的时候就会通过其他方式(reactive/toRef, reactive/toRefs)自造ref,就会造成代码更混乱

2.ref为什么需要.value

ref为什么需要加一个.value来获取值呢?为什么要这么麻烦呢?

ref是一个对象(不会丢失响应式),value存储值

通过.value属性的get和set来实现响应式

用于reactive和模板(vue编译)的时候不需要.value,其他情况都需要

3.为什么需要toRef和toRefs

初衷: 在不丢失响应式的前提下,对对象数据进行解构

前提: 针对的是响应式对象,不是普通对象

结果: 不创造响应式,只延续响应式

热门栏目