Vue3中toRef和toRefs函数怎么使用

toRef 函数使用

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

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

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

<template>  <div>    <h2>toRef toRefs 函数</h2>    <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>

保存代码,刷新页面。

Vue3中toRef和toRefs函数怎么使用

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

<template>  <div>    <h2>toRef toRefs 函数</h2>    <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>

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

Vue3中toRef和toRefs函数怎么使用

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

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

就像上面的代码:

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

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

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

<template>  <div>    <h2>toRef toRefs 函数</h2>    <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 对象。

Vue3中toRef和toRefs函数怎么使用

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

记住了!

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

ref 函数验证

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

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

<template>  <div>    <h2>ref reactive 函数</h2>    <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 函数包裹后的数据有没有修改成功,源数据有没有修改成功,最后页面有没有修改,下面看截图。

Vue3中toRef和toRefs函数怎么使用

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

所以再记住!

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

toRefs 函数

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

  • toRefs 函数用于批量设置多个数据为相应是数据。

  • toRefs 函数与原始数据相交互,修改响应式数据会影响到源数据,但是不会更新视图层。

  • toRefs 函数还可以与其他响应式数据相交互,更加方便处理视图层数据。

toRefs 函数使用

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

<template>  <div>    <h2>toRef toRefs 函数</h2>    <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>

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

Vue3中toRef和toRefs函数怎么使用

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

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

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

Vue3中toRef和toRefs函数怎么使用

诶,现在就是正常的啦!

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

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

<template>  <div>    <h2>toRef toRefs 函数</h2>    <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 函数处理数据。

Vue3中toRef和toRefs函数怎么使用

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

其实是有原因的呀!

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

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

<template>  <div>    <h2>toRef toRefs 函数</h2>    <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 函数,就可以实现直接写属性的方式展示数据了。

Vue3中toRef和toRefs函数怎么使用

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

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

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

看下面代码:

<template>  <div>    <h2>toRef toRefs 函数</h2>    <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>

打印一下结果:

Vue3中toRef和toRefs函数怎么使用

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

到此,关于“Vue3中toRef和toRefs函数怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

文章标题:Vue3中toRef和toRefs函数怎么使用,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/28320

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年9月21日 下午10:55
下一篇 2022年9月21日 下午10:56

相关推荐

  • ​CSS3中calc()如何使用

    CSS3 calc() 的使用 calc() 用法类似于函数,能够给元素设置动态的值: /* basic calc */.simpleBlock { width: calc(100% – 100px);}/* calc in calc */.complexBlock { width: calc(10…

    2022年9月1日
    40200
  • win7如何清理c盘垃圾不影响系统

    win7清理c盘垃圾不影响系统的方法 1、 双击计算机图标,进入资源管理器。 2、右击C盘,选择属性 3、点击常规,点击磁盘清理。 4、勾选需要清理的文件点击确定即可。 读到这里,这篇“win7如何清理c盘垃圾不影响系统”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会…

    2022年9月24日
    1.3K00
  • Windows wifi的ip地址指的是什么

    wifi的ip地址指的是路由器的管理员地址;wifi是一种高频无线电信号,相当于有线传输中的网线,ip地址是一种统一的地址格式,它为互联网上的每一个网络设备和每一台终端分配一个逻辑地址,根据路由器品牌型号的不同,其wifi的ip地址也会不同。 本教程操作环境:windows10系统、DELL G3电…

    2022年9月2日
    72800
  • windows会声会影导出视频mp4格式的方法

    会声会影导出视频mp4格式的方法 1、首先点击上方的“共享”。 2、点击右侧的“MPE4”。 3、我们可以在配置文件中更改视频具体参数。 4、然后修改文件名和渲染解码方式。 5、最后点击右边的文件夹选择保存路径,点击“开始”开始导出。 6、等待渲染完成导出视频就可以了。 以上就是关于“windows…

    2022年9月15日
    59900
  • coreldraw如何裁剪图片

    coreldraw裁剪图片的方法 1、打开软件,导入一张图片。 2、在页面左侧找到裁剪工具点击。 3、在图片上框选出你要裁剪的区域。 4、框选好之后,双击鼠标左键就成功裁好了。 以上就是关于“coreldraw如何裁剪图片”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若…

    2022年9月26日
    69700
  • 如何进行Apache Commons Collections反序列化漏洞分析与复现

    1.1 状态 完成漏洞挖掘条件分析、漏洞复现。 1.2 漏洞分析 存在安全缺陷的版本:Apache Commons Collections3.2.1以下,【JDK版本:1.7.0_80】Apache Maven 3.6.3。 POC核心代码: package com.patrilic.vul;imp…

    2022年9月8日
    89800
  • Javascript如何使用数据填充数组

    用数据填充数组 如果我们需要用一些数据来填充数组,或者需要一个具有相同值的数据,我们可以用fill()方法。 var plants = new Array(8).fill(‘8’);console.log(plants); // [‘8’, ‘8’, ‘8’,’8′, ‘8’, ‘8’,’8′, ‘…

    2022年8月30日
    47900
  • css样式中calc的含义是什么

    在css中,calc是计算的意思;calc可以理解为一个函数function,是calculate的缩写,用来指定一个元素的长度,calc可以给元素做计算,使用指定的单位值计算出长度值,语法为“元素{长度属性:calc(表达式)}”。 本教程操作环境:windows10系统、CSS3&&am…

    2022年9月15日
    75700
  • MyBatis3源码解析之怎么获取数据源

    jdbc 再贴一个JDBC运行的测试方法,流程为: 加载JDBC驱动; 获取数据库连接; 创建JDBC Statements对象; 设置SQL语句的传入参数; 执行SQL语句并获得查询结果; 对查询结果进行转换处理并将处理结果返回; 释放相关资源(关闭Connection,关闭Statement,关…

    2022年9月19日
    61000
  • windows office365企业版和家庭版区别的是什么

    office365企业版和家庭版区别: 用户数: 1、office家庭版:非常多支持 6 位用户。 2、office企业版:非常多支持 300 位用户。 许可证: 1、office家庭版:具备家用许可证。 2、office企业版:具备企业许可证。 功能: 1、office企业版相比家庭版,支持更多功…

    2022年9月21日
    71700
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部