位置: IT常识 - 正文

【vue3】关于ref、toRef、toRefs那些事(vue3.0中的ref)

编辑:rootadmin
【vue3】关于ref、toRef、toRefs那些事

推荐整理分享【vue3】关于ref、toRef、toRefs那些事(vue3.0中的ref),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3.0中的ref,vueref详解,vue3 ref用法,vue3使用$refs,vue3 ref dom,vue3使用$refs,vue3.0中的ref,vue3.0中的ref,内容如对您有帮助,希望把文章链接给更多的朋友!

😉博主:初映CY的前说(前端领域) 📒本文核心:ref、toRef、toRefs的使用方法

【前言】我们在上一节的学习当中,使用了reactive()函数将vue3中的数据变成响应式的数据,本文中所讲的三个方法也能实现将数据转化为响应式数据。话不多说,让我们来学习下这三个方法怎么用,以及与reactive的区别。

目录⭐一、ref⭐二、toRef⭐三、torefs⭐一、ref

ref 函数,可以把简单数据类型包裹为响应式数据(复杂类型也可以),注意 JS 中操作值的时候,需要加 .value 属性,模板中正常使用即可。 举个例子:

ref包装基本类型数据 App.vue<template> <div class="container"> <div>{{ name }}</div> <button @click="updateName">修改数据</button> </div></template><script> import { ref } from 'vue' export default { name: 'App', setup() { const name = ref('初映') const updateName = () => { name.value = '初映CY的前说' } return { name, updateName } }, }</script>

可看见写法与reactive()一样,不过是在js中书写的时候需要额外加一个.value即可

ref包装复杂类类型数据 注意:ref 其实也可以包裹复杂数据类型为响应式数据,一般对于数据类型未确定的情况下推荐使用 ref,例如后端返回的数据。<template> <div class="container"> <div>{{ data?.name }}</div> <button @click="updateName">修改数据</button> </div></template><script> import { ref } from 'vue' export default { name: 'App', setup() { // 初始值是 null const data = ref(null) setTimeout(() => { // 右边的对象可能是后端返回的 data.value = { name: '初映', } }, 1000) const updateName = () => { data.value.name = 'CY' } return { data, updateName } }, }</script>【vue3】关于ref、toRef、toRefs那些事(vue3.0中的ref)

如何选择? ref()和reactive()都是Vue.js3.0中提供的两个响应式API。 ref()主要用于创建一个响应式数据,它会将一个普通的JavaScript对象转换为一个响应式的对象,从而使数据的变化可以被Vue实例所追踪,当数据发生变化时,Vue会自动更新相关视图。ref()创建的响应式数据可以通过.value属性来访问和修改。 reactive()则主要用于创建一个响应式对象,可以用作包含多个值的状态对象,通常用于管理复杂的状态。它可以将一个普通的JavaScript对象转换为一个响应式对象,并且支持嵌套属性,即使嵌套属性发生变化也会被Vue实例所追踪。当响应式对象中有任何一个属性发生变化时,Vue也会自动更新相关的视图。 当你明确知道需要包裹的是一个对象,那么推荐使用 reactive,其他情况使用 ref 即可。 Vue3.2 之后,更推荐使用 ref,性能得到了很大的提升。⭐二、toRef

toRef 函数的作用:转换响应式对象中某个属性为单独响应式数据,并且转换后的值和之前是关联的(ref 函数也可以转换,但值非关联)。 先看下面这个例子:

<template> <div class="container"> <h2>name: {{ obj.name }} age: {{obj.age}}</h2> <button @click="updateName">修改数据</button> </div></template><script> import { reactive } from 'vue' export default { name: 'App', setup() { const obj = reactive({ name: '初映', age: 18, address: '江西', sex: '男', }) const updateName = () => { obj.name = '初映CY的前说' } return { obj, updateName } }, }</script>

这样写也可以将数据进行更改成为响应式的数据,但是带来了两个问题:

问题 1:模板中都要使用 obj. 进行获取数据,麻烦。

问题 2:明明模板中只用到了 name 和 age,却把整个 obj 进行了导出,没必要,性能浪费。

<template> <div class="container"> <h2>name: {{ name }} </h2> <button @click="updateName">修改数据</button> </div></template><script> import { reactive,toRef } from 'vue' export default { name: 'App', setup() { const obj = reactive({ name: '初映', age: 18, address: '江西', sex: '男', }) const name = toRef(obj, 'name') const updateName = () => { obj.name = '初映CY的前说' } return { name, updateName } }, }</script>

这样把我们需要的数据放进return即可,节约了性能与在模板中的写法,有点点了‘按需导入’的意思

⭐三、torefs

toRefs 函数的作用:转换响应式对象中所有属性为单独响应式数据,并且转换后的值和之前是关联的。

<template> <div class="container"> <h2>{{ name }} {{ age }}</h2> <button @click="updateName">修改数据</button> </div></template><script> import { reactive, toRefs } from 'vue' export default { name: 'App', setup() { const obj = reactive({ name: '初映', age: 10, }) const updateName = () => { obj.name = '初映CY的前说' obj.age = 18 } return { ...toRefs(obj), updateName } }, }</script>

toRefs将我们所有的响应式数据都进行return出去了,届时直接用上数据名称即可,记得加上…喔

至此本文结束,愿你有所收获! 期待大家的关注与支持! 你的肯定是我更新的最大动力!!!

本文链接地址:https://www.jiuchutong.com/zhishi/299775.html 转载请保留说明!

上一篇:使用Spring框架进行Web项目开发(初级)(使用spring框架,大概有哪些步骤)

下一篇:【自学前端】我只学这些够吗?好难(自学前端好学吗)

  • iqooz5x是玻璃后盖吗

    iqooz5x是玻璃后盖吗

  • ipad怎么左右两个屏(ipad怎么设置左右滑动)

    ipad怎么左右两个屏(ipad怎么设置左右滑动)

  • 支付宝赚赏金码在哪(支付宝赚赏金码领取需要付费)

    支付宝赚赏金码在哪(支付宝赚赏金码领取需要付费)

  • 淘宝亲情号有哪些权限(淘宝亲情号哪里开)

    淘宝亲情号有哪些权限(淘宝亲情号哪里开)

  • 抖音小店开通了主页怎么没有显示(抖音小店开通了在哪里看)

    抖音小店开通了主页怎么没有显示(抖音小店开通了在哪里看)

  • 手机进水喇叭声音变小杂音是(手机进水喇叭声音变小杂音放什么歌)

    手机进水喇叭声音变小杂音是(手机进水喇叭声音变小杂音放什么歌)

  • 闹钟没有设置却天天响(闹钟没有设置却响了)

    闹钟没有设置却天天响(闹钟没有设置却响了)

  • 承载系统要不要选择lte

    承载系统要不要选择lte

  • 5g双模是啥意思(5g双模是真正的5g嘛)

    5g双模是啥意思(5g双模是真正的5g嘛)

  • 键盘上除法是哪个键(键盘上除法是哪个按键)

    键盘上除法是哪个键(键盘上除法是哪个按键)

  • 什么手机膜最耐摔(什么手机膜耐用)

    什么手机膜最耐摔(什么手机膜耐用)

  • 天猫直送没有按时送到怎么办(天猫直送没有在承诺时间到怎么办)

    天猫直送没有按时送到怎么办(天猫直送没有在承诺时间到怎么办)

  • 荣耀20s怎么关闭系统自动更新(荣耀20s怎么关闭开发者模式)

    荣耀20s怎么关闭系统自动更新(荣耀20s怎么关闭开发者模式)

  • 淘宝怎么改不了性别了(淘宝怎么改不了地址)

    淘宝怎么改不了性别了(淘宝怎么改不了地址)

  • 苹果怎么关闭快门声音(苹果怎么关闭快手通知消息)

    苹果怎么关闭快门声音(苹果怎么关闭快手通知消息)

  • vue怎么剪切已拍好视频(vue如何剪裁视频)

    vue怎么剪切已拍好视频(vue如何剪裁视频)

  • 小米9pro是超声波感应器吗(小米9是超声波距离感应器吗)

    小米9pro是超声波感应器吗(小米9是超声波距离感应器吗)

  • 热点新闻怎么彻底删除(热点新闻怎么彻底删除win7)

    热点新闻怎么彻底删除(热点新闻怎么彻底删除win7)

  • 最右怎么找通讯录好友(最右怎么匹配通讯录)

    最右怎么找通讯录好友(最右怎么匹配通讯录)

  • 12.4.1系统更新了什么(12.4.1更新了什么)

    12.4.1系统更新了什么(12.4.1更新了什么)

  • 微信分在哪里查看(微信怎么才有分付)

    微信分在哪里查看(微信怎么才有分付)

  • oppo手机右上角的hd怎样关闭(oppo手机右上角有个锁怎么去掉)

    oppo手机右上角的hd怎样关闭(oppo手机右上角有个锁怎么去掉)

  • 苹果之间怎么传app(苹果之间怎么传输)

    苹果之间怎么传app(苹果之间怎么传输)

  • 马来西亚电话卡怎么激活(马来西亚电话卡哪种好)

    马来西亚电话卡怎么激活(马来西亚电话卡哪种好)

  • Yolov7模型训练与部署(yolov3模型训练)

    Yolov7模型训练与部署(yolov3模型训练)

  • 一觉醒后ChatGPT 被淘汰了(一觉醒后浑身酸痛)

    一觉醒后ChatGPT 被淘汰了(一觉醒后浑身酸痛)

  • 微信小程序开发使用onreachBottom实现页面触底加载及分页(微信小程序开发者工具)

    微信小程序开发使用onreachBottom实现页面触底加载及分页(微信小程序开发者工具)

  • ypdomainname命令  显示主机的NIS的域名(username命令)

    ypdomainname命令 显示主机的NIS的域名(username命令)

  • 财税201920号文件解读
  • 金税开票软件下载安装
  • 2023年增值税税率表
  • 增值税附加税是几个点
  • 外购货物用于什么不得抵扣进项
  • 小规模没有计提增值税直接缴纳了
  • 研发支出的项目叫什么
  • 单位多久查一次征信
  • 剩余折旧月份
  • 构建固定资产的总结
  • 企业接收供应商赠品怎么正确的入账?
  • 固定资产的知识
  • 个人取得投资收益是否缴纳个税
  • 土地租赁合同交不交印花税
  • 固定资产处置如何入账
  • 金税四期具体内容
  • 发票涉税风险有哪些
  • 留存收益账务处理视频
  • 稿酬所得的个税计算
  • 宣告分派现金股利影响所有者权益变动吗
  • 筹资活动流入的现金是内源融资吗
  • 劳务报酬计入综合所得吗
  • 投入的生产线应该怎么做
  • 哪些费用发票可以报销
  • 去年年终奖
  • 事业单位收到拨款怎么办
  • 企业代付个人所得税计算公式
  • php数组函数面试题
  • iis防盗链
  • 非城市公交企业管理办法
  • php引用文件的方法
  • php制作验证码
  • 程序员后续发展
  • 宋大叔教音乐第三单元进阶版
  • 微信小程序实现支付功能
  • vue3当中如何监听新增的属性
  • php生成zip压缩包
  • ps制作折扇效果图
  • 接受专利投资会计科目
  • 织梦配置文件
  • mongodb4
  • 怎么编制资金平衡表格
  • 林木的培育和种植免征企业所得税
  • 出口货物赠品如何申报
  • access导入到mysql
  • 税控盘维护费全额抵扣分录
  • mysql5.5创建用户
  • 税务师工作年限证明材料
  • 出售固定资产税率是13%吗
  • 商场返券计算公式
  • 转出进项税额会计分录
  • 不允许抵扣进项税额的是
  • 从工程款中扣除质保金
  • 销售返利是否需要交税
  • 其他应付款的核算项目是什么
  • 红冲发票视频教程
  • 担保贷款借款人死亡
  • 小企业会计应交所得税
  • 单位委托单位
  • 房地产开发企业增值税怎么算
  • mysql索引基础
  • server2008开机启动项设置
  • cosplay步骤
  • win7开启远程设置
  • powerdvd remote下载
  • Aero glass for Win8.1黑屏/不兼容弹窗的解决方法介绍
  • WIN7系统如何关掉游戏屏保
  • Nodejs+express+html5 实现拖拽上传
  • linux安装ko驱动
  • unity热更新一般更新什么
  • unityai寻路
  • 基于JAVAscrip的课程设计源代码
  • [置顶]公主大人接下来是拷问时间31
  • javascript new fun的执行过程
  • No active compatible AVD's or devices found. Relaunch this configuration after connecting a device o
  • android studio操作指南
  • python中import导入模块的方法
  • 民办学校需要交工会经费吗
  • 学什么专业可以在税务局上班
  • 平板电脑购物
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设