Vue3中ref toRef和toRefs的区别有哪些
这篇文章主要为大家展示了"Vue3中ref toRef和toRefs的区别有哪些"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"Vue3中ref toRef和toRefs的区别有哪些"这篇文章吧。
一、基础
1.ref
(1) 生成值类型的响应式数据, 通过 .value修改值
{{ ageRef }}
上面这段代码,定义了一个ageRef变量,并每秒将ageRef加1,页面展示的数值也会加1.
(2) 可用于reactive中
将上面的代码改动如下, 引入reactive定义变量,将ref定义的变量引入reactive中, 模板中展示reactive的变量. 最后的效果和上面(1)的一样
{{ info.age }}
(3) 可用于获取Dom
ref-dom-test
上面的代码中，使用toRef将state的age属性变成一个响应式变量，然后在1秒后将state的age值变为20，此时ageRef也会变成20；在2秒后将ageRef的值变为21，此时state的age值也会变成21，说明了两者保持相互引用关系
toRef针对的是响应式，针对的不是普通对象，如果用于非响应式，产出的结果不具有响应式
3.toRefs
将一个响应式对象转为普通对象
对象的每一个属性都是对应的ref
两者保持引用关系
我们来看下面这段代码
{{ name }}---{{ age }}
上面的代码中，使用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
例如：
x:{{x}} y:{{y}}
上面的代码，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
初衷: 在不丢失响应式的前提下,对对象数据进行解构
前提: 针对的是响应式对象,不是普通对象
结果: 不创造响应式,只延续响应式
以上是"Vue3中ref toRef和toRefs的区别有哪些"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！
