Vue3如何理解ref toRef和toRefs的区别
Vue3中新增了几种创建响应式数据的方法,其各自的作用当然也不尽相同,每一种方法都有其自己的应用场景,今天我们来聊聊什么是ref toRef和toRefs?三者在使用方式上有什么不同?最佳的使用方式是什么?
一、基础
1.ref
(1) 生成值类型的响应式数据, 通过 .value修改值
<template> <div>{{ ageRef }}</div> </template> <script> import { ref } from 'vue' export default { setup() { const ageRef = ref(20) setInterval(() => { ageRef.value += 1 }, 1000) return { ageRef } }, } </script>
上面这段代码,定义了一个ageRef变量,并每秒将ageRef加1,页面展示的数值也会加1.
(2) 可用于reactive中
将上面的代码改动如下, 引入reactive定义变量,将ref定义的变量引入reactive中, 模板中展示reactive的变量. 最后的效果和上面(1)的一样
<template> <div>{{ info.age }}</div> </template> <script> import { ref, reactive } from 'vue' export default { setup() { const ageRef = ref(20) const info = reactive({ age: ageRef }) setInterval(() => { ageRef.value += 1 }, 1000) return { info } }, } </script>
(3) 可用于获取Dom
<template> <div ref="eleDom">ref-dom-test</div> </template> <script> import { ref, onMounted } from 'vue' export default { setup() { const eleDom = ref(null) onMounted(() => { console.log(eleDom.value.innerHTML) // ref-dom-test }) return { eleDom } }, }
上面代码控制台输出ref-dom-test, 说明获取到了Dom元素.
要获取Dom元素必须要符合以下规则
定义的ref变量名必须要和模板中ref中的值一致,如代码中的eleDom
2.toRef
- 针对一个响应式对象的prop
- 创建一个ref,具有响应式
- 两者保持引用关系
我们来看下面这段代码
<template> <div>{{ state.age }} --- {{ ageRef }}</div> </template> <script> import { toRef, reactive } from 'vue' export default { setup() { const state = reactive({ name: 'JL', age: 18 }) const ageRef = toRef(state, 'age') setTimeout(() => { state.age = 20 }, 1000) setTimeout(() => { ageRef.value = 21 }, 2000) return { state, ageRef } }, } </script>
上面的代码中,使用toRef将state的age属性变成一个响应式变量,然后在1秒后将state的age值变为20,此时ageRef也会变成20;在2秒后将ageRef的值变为21,此时state的age值也会变成21,说明了两者保持相互引用关系
toRef针对的是响应式,针对的不是普通对象,如果用于非响应式,产出的结果不具有响应式
3.toRefs
- 将一个响应式对象转为普通对象
- 对象的每一个属性都是对应的ref
- 两者保持引用关系
我们来看下面这段代码
<template> <div>{{ name }}---{{ age }}</div> </template> <script> import { reactive, toRefs } from 'vue' export default { setup() { const state = reactive({ name: 'JL', age: 18 }) const stateRefs = toRefs(state) setTimeout(() => { state.age = 20 }, 1000) setTimeout(() => { stateRefs.age.value = 21 }, 2000) return stateRefs }, } </script>
上面的代码中,使用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
例如:
<template> <div>x:{{x}} y:{{y}}</div> </template> <script> import { reactive, toRefs } from 'vue' export default { setup() { function test() { const state = reactive({ x: 1, y: 2 }) return toRefs(state) } const {x, y} = test() setTimeout(() => { x.value = 2 }, 1000) return { x, y } } } </script>
上面的代码,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的区别的文章就介绍到这了,更多相关Vue3 ref toRef和toRefs内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7046200573212753951
相关文章
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要介绍了C#中out与ref的区别实例解析,对C#初学者有不错的学习借鉴价值,需要的朋友可以参考下...2020-06-25
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 有过C#基础知识的都应该清楚Ref和Out的使用方法,所以下面这篇文章主要给大家介绍了关于c#基础系列之ref和out的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
- 众所周知,react推出了hooks之后,很多项目就开始往hooks上靠拢,所以也就出现了class和hooks交叉使用的项目。这个时候使用ref需要注意一些东西...2021-06-20
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据,整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
- 这篇文章主要介绍了详解vue3 沙箱机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
- 本文将通过实例和说明,给大家详细讲解C#中的ref和out参数...2020-06-25
- 这篇文章主要介绍了Vue3 响应式侦听与计算的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-11
- 这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
- 本篇文章是对params,ref,out的参数问题进行了详细的分析介绍,需要的朋友参考下...2020-06-25
- 今天又遇到这个问题了,问了问同事,他说最近面试的时候,也问道他了,于是给我讲了讲,现在大概是记住了,分享一下。...2020-06-25
- 在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,这篇文章主要给大家介绍了关于Vue3.0中Ref与Reactive区别的相关资料,需要的朋友可以参考下...2021-07-07