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


Posted in Vue.js onFebruary 18, 2022

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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
Vue h函数的使用详解
Feb 18 #Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 #Vue.js
前端vue+express实现文件的上传下载示例
一篇文章告诉你如何实现Vue前端分页和后端分页
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 #Vue.js
vue3获取当前路由地址
Feb 18 #Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 #Vue.js
You might like
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
PHP实现八皇后算法
2019/05/06 PHP
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python复制与引用用法分析
2015/04/08 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Python读取实时数据流示例
2019/12/02 Python
python getopt模块使用实例解析
2019/12/18 Python
比利时香水网上商店:NOTINO
2018/03/28 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
旅游活动总结
2014/08/27 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
单位委托书
2014/10/15 职场文书
2016十一国庆节感言
2015/12/09 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
Nginx 匹配方式
2022/05/15 Servers
python实现商品进销存管理系统
2022/05/30 Python