位置: 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框架,大概有哪些步骤)

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

  • 煤气灶打不着火怎么办感觉不通气(煤气灶打不着火怎么办)(煤气灶打不着得用打火机)

    煤气灶打不着火怎么办感觉不通气(煤气灶打不着火怎么办)(煤气灶打不着得用打火机)

  • 钉钉手机怎么设置虚拟背景(钉钉手机怎么设置子管理员)

    钉钉手机怎么设置虚拟背景(钉钉手机怎么设置子管理员)

  • 荣耀x10max有红外线功能吗(荣耀x10有红外功能)

    荣耀x10max有红外线功能吗(荣耀x10有红外功能)

  • 如何进入路由器设置界面(如何进入路由器界面)

    如何进入路由器设置界面(如何进入路由器界面)

  • 苹果手机淘宝返回不了(苹果手机淘宝返回小箭头反回不了是怎么回事)

    苹果手机淘宝返回不了(苹果手机淘宝返回小箭头反回不了是怎么回事)

  • 抖音聊天记录为什么突然没有了(抖音聊天记录为啥自己不见了)

    抖音聊天记录为什么突然没有了(抖音聊天记录为啥自己不见了)

  • 腾讯视频会议能看到所有人的细节吗(腾讯视频会议能加好友吗)

    腾讯视频会议能看到所有人的细节吗(腾讯视频会议能加好友吗)

  • 企业微信为什么进不去(企业微信为什么会封号)

    企业微信为什么进不去(企业微信为什么会封号)

  • 苹果要不要开启钥匙串

    苹果要不要开启钥匙串

  • 手机摔过之后容易发烫(手机摔后后期会有问题吗)

    手机摔过之后容易发烫(手机摔后后期会有问题吗)

  • 手机为什么突然特别卡(手机为什么突然变成黑白屏了)

    手机为什么突然特别卡(手机为什么突然变成黑白屏了)

  • 苹果手机彩信发不出去怎么回事(苹果手机彩信发送失败怎么回事)

    苹果手机彩信发不出去怎么回事(苹果手机彩信发送失败怎么回事)

  • 芯片封测什么意思(芯片封测百度百科)

    芯片封测什么意思(芯片封测百度百科)

  • 魅族16有双扬声器吗(魅族16plus双扬声器)

    魅族16有双扬声器吗(魅族16plus双扬声器)

  • 联通hd什么意思(联通有个hd)

    联通hd什么意思(联通有个hd)

  • qq音乐扣费从哪里扣的(qq音乐已经扣费了怎么申请退款)

    qq音乐扣费从哪里扣的(qq音乐已经扣费了怎么申请退款)

  • sdm710是什么处理器(sdm710是什么处理器和675)

    sdm710是什么处理器(sdm710是什么处理器和675)

  • 关机了怎么看未接电话(关机了怎么看未接短信)

    关机了怎么看未接电话(关机了怎么看未接短信)

  • 手机号码拉黑了怎么恢复(手机号码拉黑了发信息对方能看到吗)

    手机号码拉黑了怎么恢复(手机号码拉黑了发信息对方能看到吗)

  • 在win10中电脑自动进入睡眠状态该怎么办?(win10自动关机方法)

    在win10中电脑自动进入睡眠状态该怎么办?(win10自动关机方法)

  • 笔记本电池的正确使用方法(笔记本电池的正负极区分)

    笔记本电池的正确使用方法(笔记本电池的正负极区分)

  • javascript获取url信息的常见方法(javascript获取字符串长度)

    javascript获取url信息的常见方法(javascript获取字符串长度)

  • 增值税电子发票可以作废吗
  • 个税申报按权责发生制行吗?
  • 实际负税计算公式
  • 个税app正式启用
  • 缴纳上月附加税会计科目
  • 专家劳务费可以税前扣除吗
  • 注册资本转出可以吗
  • 个税累计扣除项目合计2712.5是什么
  • 公司购入小汽车是否可以抵扣
  • 资产处置收益对应科目
  • 出口企业退税分录
  • 已缴企业所得税公司账户的钱怎么办
  • 发出材料是借还是贷
  • 厂家订货会合同
  • 隔月的发票冲红了税怎么办
  • 公司办理个人所得税退税
  • 定货合同有法律效力吗?
  • 小规模纳税人的税率是多少(含国、地税)
  • 代理进出口公司结售汇
  • 国外汇款 用什么理由
  • 长期待摊费用账户按用途和结构分类应属于
  • 来料加工贸易是什么工作
  • 1697509110
  • 小规模纳税人免税额度是多少
  • 企业如何选择会计师事务所
  • php提高性能
  • php二维数组添加数据
  • 应交所得税和所得税费用的区别计算公式
  • 高新企业认定后研发费用比例
  • 增值税跟企业所得税的关系
  • PHP:pcntl_wstopsig()的用法_PCNTL函数
  • 企业个人借款利息怎么做账
  • idea怎么运行前端vue项目
  • php模板引擎执行时间
  • php输入月份输出天数
  • php中单引号和双引号
  • vue @hook
  • 股权收购账务处理
  • 出口退税退下来还得缴税吗
  • 增值税专用发票和普通发票的区别
  • 用工会经费给员工发工资
  • 收到的赠品直接用吗
  • 民间非营利组织会计制度
  • 社保费用如何做账,社保费会计分录如何写
  • java中map.entry
  • centos7.0安装
  • 固定资产报废如何交增值税
  • 领取定额备用金的会计分录
  • 增值税扣税凭证进项税额转出情况核实函
  • 小规模公司都交哪些税
  • 股权投资都有哪些
  • 个税申报更正申报如何操作
  • 企业所得税计提金额怎么算
  • 火车票丢了还能再取吗
  • 会计政策变更追溯调整的年限
  • 成本利润率指的是
  • 企业微信开通微信支付
  • 公司购买汽车如何抵成本
  • 弥补以前年度亏损后缴纳所得税
  • 购买发票打印机如何账务处理?
  • 财务报表的一般构成要素
  • 水果店的账务处理
  • 政府专项扶持资金
  • 购车的费用包括哪些费用
  • 小规模纳税人中标一般计税
  • 存货与总账对账
  • sql多条件组合条件的先后顺序
  • vista正版破解
  • 提升英语
  • 手把手教你安装实木门
  • version 2什么意思
  • xp操作系统入门
  • windows7英雄联盟老是崩溃
  • win8系统笔记本怎么恢复出厂设置
  • javascript创建对象
  • 用jquery制作轮播图效果
  • node创建服务
  • js的ajax请求写法
  • 电子税务局辽宁省
  • 什么是双创服务平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设