Vue3 toRef 和 toRefs 函数

上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数,实现响应式数据,今天主要来说一下 toRef 函数和 toRefs 函数的基本使用。

toRef 函数

通过上一篇博客,我们知道,ref 函数可以创建一个响应式的数据,那 toRef 函数同样也是创建一个响应式的数据,那么他们之间的区别是什么呢?

首先一点,ref 函数他的本质其实是去拷贝一份数据,脱离了与源数据的交互。什么意思呢?就是 ref 函数可以将对象里面的属性值变成响应式的数据,修改响应式数据,是不会影响到源数据,但是视图层上的数据会被更新。但是 toRefs 函数的本质是引用,也就是说,toRef 函数会与源数据交互,修改响应式数据会造成源数据的修改,但是他的修改不会造成视图层数据的更新。

上面这段话理解吗?不理解的话没关系,下面通过几个案例就可以明白了。

toRef 函数使用

首先呢, toRef 函数有两个参数。

toRef(操作对象, 对象属性)

好,接下来我们使用 toRef 函数写一个案例,还是和以前一样,页面展示一个用户的名称和年纪。

<template>
<div>
<h1>toRef toRefs 函数</h1>
<p>姓名:{{boy_toRef}}</p>
<p>年龄:{{boy.age}}</p>
</div>
</template>
<script>
import { toRef } from 'vue'
export default {
setup() {
const boy = { // 创建一个用户对象
name: '我是.', // 用户名称
age: 10 // 用户年龄
}
// 使用 toRef 函数包裹,操作 boy 对象的 name 属性
const boy_toRef = toRef(boy, 'name')
console.log(boy_toRef) // 我们直接打印看一下包裹后的数据格式
return { boy, boy_toRef }
}
}
</script>

保存代码,刷新页面。



我们可以看到数据的结构,在 value 里面直接就是 boy 下面 name 的属性值,所以说,接下来我们编写一个按钮,点击按钮,修改这个 name 值。

<template>
<div>
<h1>toRef toRefs 函数</h1>
<p>姓名:{{boy_toRef}}</p>
<p>年龄:{{boy.age}}</p>
<el-button type="primary" @click="btn">修改 name</el-button>
</div>
</template>
<script>
import { toRef } from 'vue'
export default {
setup() {
const boy = {
name: '我是.',
age: 10
}
// 这个 boy_toRef 就是被 toRef 函数操作过的 boy 的 name 值
const boy_toRef = toRef(boy, 'name')
const btn = () => {
boy_toRef.value = '.' // 把 name 修改成 .
console.log(boy_toRef) // 修改完成打印一下结果
}
return { boy, btn, boy_toRef }
}
}
</script>

保存代码刷新页面,然后点击按钮看一下页面效果。

通过截图展示的效果我们可以发现,boy_toRef 的值确实被修改了,但是呢,页面并没有改变,而且页面也没有出现错误。

这是什么原因呢? 其实这不是 Bug 哈,在本篇博文开始就说过,toRef 函数会与源数据交互,修改响应式数据会造成源数据的修改,但是他的修改不会造成视图层数据的更新,所以说,这就是 toRef 函数的功能。确实,视图没有数据更新我们通过上面的截图看到了,但是源数据修改这个怎么看呢?没关系,在回答这个问题之前,我们首先得知道,什么是源数据。

就像上面的代码:

const boy = {
name: '我是.',
age: 10
}
const boy_toRef = toRef(boy, 'name')

toRef 函数将 boy 对象给包裹了起来,所以说,boy 对象就是源数据。

所以说,想知道源数据有没有改变,在点击按钮之后,打印一下 boy 对象,看一下 boy 有没有被改变。

<template>
<div>
<h1>toRef toRefs 函数</h1>
<p>姓名:{{boy_toRef}}</p>
<p>年龄:{{boy.age}}</p>
<el-button type="primary" @click="btn">修改 name</el-button>
</div>
</template>
<script>
import { toRef } from 'vue'
export default {
setup() {
const boy = {
name: '我是.',
age: 10
}
const boy_toRef = toRef(boy, 'name') // 这个 boy_toRef 就是被 toRef 函数操作过的 boy 的 name 值
const btn = () => {
boy_toRef.value = '.' // 把 name 修改成 .
console.log(boy_toRef) // 修改完成打印一下结果
console.log(boy) // 修改完成打印一下boy结果
}
return { boy, btn, boy_toRef }
}
}
</script>

保存代码,刷新页面,在点击按钮修改 name 值,然后查看一下控制台打印的 boy 对象。



发现 boy 对象的 name 值已经从 我是. 改为 .了,但是页面依旧没有更新。

记住了!

toRef 函数会与源数据交互,修改响应式数据会造成源数据的修改,但是他的修改不会造成视图层数据的更新。

ref 函数验证

ref 函数可以将对象里面的属性值变成响应式的数据,修改响应式数据,是不会影响到源数据,但是视图层上的数据会被更新 这句话是正确的嘛?上一节我们没测试,所以说在这里我们也测试一下。

我们还是写一个案例,页面展示一个名称,点击按钮,修改页面名称。

<template>
<div>
<h1>ref reactive 函数</h1>
<p>姓名:{{name_ref}}</p>
<el-button type="primary" @click="btn">修改信息</el-button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const name = '我是.'
const name_ref = ref(name)
const btn = () => {
name_ref.value = '.'
console.log(name_ref) // 打印一下被ref包裹的数据
console.log(name) // 打印一下源数据
}
return { name_ref, btn }
}
}
</script>

保存代码,刷新页面,点击按钮查看页面控制台打印的结果,主要是看一下被 ref 函数包裹后的数据有没有修改成功,源数据有没有修改成功,最后页面有没有修改,下面看截图。

OK,通过上面截图,顾忌大家都理解了吧!

所以再记住!

ref 函数可以将对象里面的属性值变成响应式的数据,修改响应式数据,是不会影响到源数据,但是视图层上的数据会被更新

toRefs 函数

toRefs 函数的使用呢,其实和 toRef 函数类似的哈。

  • toRefs 函数用于批量设置多个数据为相应是数据。
  • toRefs 函数与原始数据相交互,修改响应式数据会影响到源数据,但是不会更新视图层。
  • toRefs 函数还可以与其他响应式数据相交互,更加方便处理视图层数据。

toRefs 函数使用

老样子,创建一个对象,然后使用 toRefs 函数包裹,在页面展示一下。

<template>
<div>
<h1>toRef toRefs 函数</h1>
<p>姓名:{{boy_toRefs.name}}</p>
<p>年龄:{{boy_toRefs.age}}</p>
</div>
</template>
<script>
import { toRefs } from 'vue'
export default {
setup() {
const boy = {
name: '我是.',
age: 10
}
const boy_toRefs = toRefs(boy) // 将 boy 用 toRefs 包裹
console.log(boy_toRefs) // 打印一下结果
return { boy_toRefs }
}
}
</script>

保存代码,刷新页面查看。

所以说,我们修改修改一下代码,在渲染的时候除了 .属性 之外,还需要 .value。

    <p>姓名:{{boy_toRefs.name.value}}</p>
<p>年龄:{{boy_toRefs.age.value}}</p>

把视图层代码修改一下,然后查看效果。

诶,现在就是正常的啦!

有人可能会疑问,那这玩意儿整的不是越来越复杂了吗?本来直接点属性就可以,现在还得点属性点value,不是多此一举,脱裤子放P吗? 嘿嘿嘿!我觉得也是。

为什么呢说是多此一举也很正常,因为前面的博文讲过,这种复杂结构数据我们完全可以使用 reactive 函数来处理呀,渲染最多点一次就可以,但是 toRefs 函数却需要点两次。

<template>
<div>
<h1>toRef toRefs 函数</h1>
<p>姓名:{{boy_toRefs.name}}</p>
<p>年龄:{{boy_toRefs.age}}</p>
</div>
</template>
<script>
import { toRefs, reactive } from 'vue'
export default {
setup() {
const boy = {
name: '我是.',
age: 10
}
const boy_toRefs = reactive(boy)
return { boy_toRefs }
}
}
</script>

我们不使用 toRefs 函数,而是用之前说的 reactive 函数处理数据。

我们可以看到,页面是可以正常解析的,那为什么我们还有舍近求远的使用 toRefs 函数呢?

其实是有原因的呀!

其实 toRefs 函数最大的用处在这里!

我们这个 boy 对象里面只有两个参数比较少,如果我们这个对象里面有十个参数或者是更多的话,每次展示的时候都得写那么多遍的 boy 点,是不是很麻烦呢?所以说使用 toRefs 函数就可以解决这个问题,看下面的代码。

<template>
<div>
<h1>toRef toRefs 函数</h1>
<p>姓名:{{name}}</p>
<p>年龄:{{age}}</p>
</div>
</template>
<script>
import { toRefs } from 'vue'
export default {
setup() {
const boy = {
name: '我是.',
age: 10
}
return { boy_toRefs , ...toRefs(boy)}
}
}
</script>

在 return 抛出 reactive 的时候,使用扩展运算符和 toRefs 函数,就可以实现直接写属性的方式展示数据了。



但是呢,深层次的对象依旧需要通过点来实现。

也许你还有疑问,直接扩展运算 reactive 函数也行啊,为啥要套上 toRefs 函数,记住一点呀!

toRefs 函数修改,原始数据被改变,页面不会被触发。

看下面代码:

<template>
<div>
<h1>toRef toRefs 函数</h1>
<p>姓名:{{name}}</p>
<p>年龄:{{age}}</p>
<el-button type="primary" @click="btn">修改 name</el-button>
</div>
</template>
<script>
import { toRefs, reactive } from 'vue'
export default {
setup() {
const boy = {
name: '我是.',
age: 10
}
const new_toRefs = toRefs(boy) const btn = () => {
new_toRefs.name.value = '.'
console.log(boy)
} return { btn, ...toRefs(boy) }
}
}
</script>

打印一下结果:

从打印结果中可以看出,原始数据被改变,页面没有被触发。但从我的写法上应该可以注意到,toRefs 返回的对象,随便解、随便构,丝毫不会影响值的响应性。

总结

有的小伙伴可能还是不太理解这两个函数,稍微总结一下子。

  • 如果想让响应式数据和以前的数据关联起来,并且想在更新响应式数据的时候不更新视图,那么就使用 toRef 函数。
  • 如果希望将对象的多个属性都变成响应式数据,并且要求响应式数据和原始数据关联,并且更新响应式数据的时候不更新视图,就使用 toRefs 函数用于批量设置多个数据为响应式数据。因为 toRef 函数一次仅能设置一个数据。
  • toRefs 函数接收一个对象作为参数,它会遍历对象身上的所有属性,然后挨个调用 toRef 函数执行。

好了,今天的内容大体就是这些了,晚安宝子们,明天见!

# Vue3 toRef 和 toRefs 函数的更多相关文章

  1. # vue3 ref 和 reactive 函数

    vue3 ref 和 reactive 函数 前言 上一篇博文介绍 setup 函数的时候,最后出现一个问题,就是在 setup 函数中,编写一个事件,直接去修改定义的变量,发现页面上没有更新成功,并 ...

  2. Vue3全家桶升级指南二ref、toRef、toRefs的区别

    ref是对原始数据的拷贝,当修改ref数据时,模板中的视图会发生改变,但是原始数据并不会改变. toRef是对原始数据的引用,修改toRef数据时,原始数据也会发生改变,但是视图并不会更新. 在vue ...

  3. vue3 的 ref、isRef、toRef、toRefs、toRaw 详细介绍

    ref.isRef.toRef.toRefs.toRaw 看着一堆类似的东西,一个头两个大,今天整理一篇文章详细介绍它们的功能及区别. 1.ref ref 属性除了能够获取元素外,也可以使用 ref ...

  4. vue3.x新特性之setup函数,看完就会用了

    最近有小伙伴跟我聊起setup函数,因为习惯了vue2.x的写法导致了,setup用起来觉得奇奇怪怪的,在一些api混编的情况下,代码变得更加混乱了,个人觉得在工程化思想比较强的团队中使用setup确 ...

  5. Vue3语法快速入门以及写一个倒计时组件

    Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的count ...

  6. 全面了解Vue3的 ref 和相关函数和计算属性

    基础类型的响应性 -- ref 在vue3里面,我们可以通过 reactive 来实现引用类型的响应性,那么基础类型的响应性如何来实现呢? 可能你会想到这样来实现: const count = rea ...

  7. Vue3的新特性及相关的Composition API使用

    首先 创建项目 Vue3 Vue3 相较于Vue2 的6大亮点: 1 性能快. 2 按需编译 体积更小 3 提供了组合API 类似于react 的React Hooks 4 更好的Ts支持 5 暴露了 ...

  8. vue3 学习笔记 (四)——vue3 setup() 高级用法

    本篇文章干货较多,建议收藏! 从 vue2 升级到 vue3,vue3 是可以兼容 vue2 的,所以 vue3 可以采用 vue2 的选项式API.由于选项式API一个变量存在于多处,如果出现问题时 ...

  9. Vue3 中有哪些值得深究的知识点?

    众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点.喜欢的话建议收藏,点个关注! 1.createApp vue2 和 vue3 在创建实例 ...

随机推荐

  1. python学习-Day30

    目录 今日内容详细 作业讲解 设计模式 单例模式 实现思想 编写 pickle模块 今日内容详细 作业讲解 编写元类规定对象的所有数据值转大写 eg: obj.name = 'jason' print ...

  2. 二叉查找树速通攻略 图文代码精心编写(Java实现)

    说在前面 如题目所言 这篇文章为了给下一篇二叉查找数做铺垫和前期知识准备,以便大家有良好的阅读体验,本来想合在一起的,但觉得有些长,所以就拆开了哈哈哈,还是新手向,两篇文章有些长,但如果能认真看下去, ...

  3. Linux 查询 OS、CPU、内存、硬盘信息

    点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 一.前言 当我们接手了一台或者几台服务器的时候,首先我们 ...

  4. 5┃音视频直播系统之 WebRTC 中的协议UDP、TCP、RTP、RTCP详解

    一.UDP/TCP 如果让你自己开发一套实时互动直播系统,在选择网络传输协议时,你会选择使用UDP协议还是TCP协议 假如使用 TCP 会怎样呢?在极端网络情况下,TCP 为了传输的可靠性,将会进行反 ...

  5. c# SendInput模拟输入字符和按键

    介绍: 该程序本意是为了在彩六里打中文用的,现整理出来供大家复制粘贴.(源程序已开源至GitHub - 彩六中文输入) 主要使用SendInput函数,与c语言中用法一致.(部分代码来自网络) 命名空 ...

  6. 好客租房15-jsx中的条件渲染

    jsx中的条件渲染 场景:loding效果 条件渲染:根据条件渲染特定的jsx结构 可以使用if/else或者三元运算符和逻辑和运算符实现 //导入react import React from &q ...

  7. unity---Lighting面板

    打开Lighting面板 将天空盒改为别墅 图片转化为Cube 设置一个材质球

  8. 151-模型-Power BI&Power Pivot模型DAX函数使用量分析

    151-模型-Power BI&Power Pivot模型DAX函数使用量分析 1.背景 我们在 Power BI 或者 Power Pivot 项目中会写很多的 DAX 表达式.在最后项目交 ...

  9. 安装Redis到Linux(源码)

    运行环境 系统版本:Ubuntu 16.04.2 LTS 软件版本:redis-5.0.4 硬件要求:无 安装过程 1.配置系统参数 root@localhost:~# vim /etc/sysctl ...

  10. 用python解决打标签时将xml文件的标签名打错

    用python解决打标签时将xml文件的标签名打错 问题描述:再进行达标签时将magnetic_tile的标签名错误的打成了magnetic_title,又不想一张一张的修改 出现问题的xml文件 & ...