罗田县升平网络工作室,一家专业从事网站建设的工作室

罗田县社区

 找回密码
 加入罗田县社区

QQ登录

只需一步,快速开始

快捷登录

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。
查看: 428|回复: 0

Vue3如何理解ref toRef和toRefs的区别

[复制链接]

712

主题

697

帖子

791

积分

社区达人

积分
791
发表于 2022-1-11 17:27:12 来自手机 | 显示全部楼层 |阅读模式
目录


  • 一、基础

    • 1.ref
    • 2.toRef

  • 3.toRefs
  • 4.最佳的使用方式
  • 二、深入

    • 1.为什么需要ref
    • 2.ref为什么需要.value
    • 3.为什么需要toRef和toRefs

Vue3中新增了几种创建响应式数据的方法,其各自的作用当然也不尽相同,每一种方法都有其自己的应用场景,今天我们来聊聊什么是ref toRef和toRefs?三者在使用方式上有什么不同?最佳的使用方式是什么?

一、基础



1.ref


(1) 生成值类型的响应式数据, 通过 .value修改值
  1. <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)的一样
  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
  1. <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,具有响应式   
  • 两者保持引用关系
我们来看下面这段代码
  1. <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   
  • 两者保持引用关系
我们来看下面这段代码
  1. <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
例如:
  1. <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来获取值呢&#63;为什么要这么麻烦呢&#63;
       
  • ref是一个对象(不会丢失响应式),value存储值   
  • 通过.value属性的get和set来实现响应式   
  • 用于reactive和模板(vue编译)的时候不需要.value,其他情况都需要

3.为什么需要toRef和toRefs

       
  • 初衷: 在不丢失响应式的前提下,对对象数据进行解构   
  • 前提: 针对的是响应式对象,不是普通对象   
  • 结果: 不创造响应式,只延续响应式
到此这篇关于Vue3如何理解ref toRef和toRefs的区别的文章就介绍到这了,更多相关Vue3 ref toRef和toRefs内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

来源:http://www.jb51.net/article/233449.htm
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
打赏鼓励一下!
*罗田县社区ltxbbs.cn 罗田人自己的社区!
回复

使用道具 举报

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。

浏览排行

(36663)2019-11-5 公共云钱包资金盘骗局揭秘: 网络传销+原始股骗局合体!

(20853)2019-12-20 12月17日 邓智天法院直播庭审疑问全解答!

(19844)2019-12-1 环保币GEC资金盘骗局最新消息: 即将崩盘!

(14887)2018-12-24 罗田县人民法院公布【第五批失信被执行人名单】 ...

(14190)2019-11-3 曝光!PTFX已经崩盘跑路,投资者血流成河!

(13339)2019-11-9 巨胸肥臀大长腿,嫩模糯美子真人COS不知火舞福利污图

(11694)2019-8-7 湖北电力网上缴费,支付宝绑定户号的初始密码是什么?

(11344)2018-10-17 罗田县人民政府“12345”市民服务热线服务指南

(10131)2019-12-11 公安定性了, 趣码是非法传销! 趣码怎么退回365元?

(9969)2019-12-15 满足你对女同事的幻想 风骚秘书阿朱销魂眼神勾魂摄魄

最新发表

[无理取闹]2022-8-18 德媒述评:“屋顶”成中国光伏发展新蓝海

[开心每一天]2022-8-18 港媒:中国完善期货市场法律框架

[zhanwenfang]2022-8-18 港媒报道:中国多地出台政策鼓励生育

[jiantengxie]2022-8-18 现场视频!东部战区飞行员俯瞰澎湖列岛

[Mandy1008]2022-8-18 东部战区位台岛周边海空域组织多军兵种联合战备警巡和实战化演练

[ulteawx]2022-8-18 俄媒:俄吊销捷克和保加利亚企业军机维修许可证

[不要问我]2022-8-18 俄国防部:一架英国侦察机侵犯俄领空遭驱离

[曾磊]2022-8-18 俄媒:斯洛伐克向乌克兰提供多门自行榴弹炮

[不要问我]2022-8-18 外媒:新西兰将向英国派遣120名军事人员协助培训乌军人

[hylin]2022-8-18 法媒:以军空袭叙境内目标致多人死伤

QQ|Archiver|手机版|小黑屋|罗田县社区LTXBBS.CN ( 鄂ICP备18029072号-1 )|网站地图


手机扫一扫继续访问
[免责声明]
本站系本网编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
如涉及作品内容、版权和其它问题,请在30日内与本网联系,我们将在第一时间删除内容!
[声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。

进入社区 | 发表新帖 | 百度收录 |
技术提供:罗田县升平网络工作室
站长Email:admin@ltxbbs.cn
投诉电话(刮开查看):15374567400

GMT+8, 2022-8-18 21:59 , Processed in 0.140865 second(s), 32 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表