Vue3中toRef与toRefs的区别


Posted in Vue.js onMarch 24, 2022

作用:创建一个ref对象,其value值指向另外一个对象中的某个属性。这样在模板中就可以直接使用属性名而不用麻烦的再加对象名前缀了。

语法:

const name = toRef(person,'name')

应用:要将响应式对象中的某个属性单独提供给外部使用时。

扩展:toRefstoRef功能一致,但可以批量创建多个ref对象,需要注意的是它只会解析对象的第一层属性,语法直接传入对象 toRefs(person)

示例:

toRef

<template>
  <span>{{person}}</span>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>薪资:{{salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增涨年龄</button>
  <button @click="salary++">涨薪</button>
</template>
<script>
    import {reactive,toRef,toRefs} from 'vue'
    export default{
        name:'App',
        setup(){
            let person = reactive({
                name:'张三',
                age:18,
                job:{
                    j1:{
                        salary:20
                    }
                }
            })
            return {
                person,   //如果只是像之前一样定义reactive后 模板中需要使用属性都要加上对象名(person.name)
                name:toRef(person,'name'), 
                age:toRef(person,'age'),
                salary:toRef(person.job.j1,'salary')
                /*
                但有了toRef后就可以在return中定义数据名称,使用toRef转换为ref的响应式基本数据,
                在模板中就不用再繁琐的加对象名,并且是双向绑定,模板中的修改也会影响到原对象
                */
            }
        }
    }
</script>

在线浏览效果:

Vue3中toRef与toRefs的区别

toRefs 

<script>
    import {reactive,toRef,toRefs} from 'vue'
    export default{
        name:'App',
        setup(){
            let person = reactive({
                name:'张三',
                age:18,
                job:{
                    j1:{
                        salary:20
                    }
                }
            })
            
            return {
                person,
                  ...toRefs(person) 
                /*
                toRefs会将对象第一层的属性都转换为ref基本类型所以用到ES6的语法将这些基本类型都展开来
                注意!!toRefs只会将第一层转换为ref基本类型 
                */
            }
        }
    }
</script>

浏览器效果图:

Vue3中toRef与toRefs的区别

到此这篇关于Vue3中toRef与toRefs的区别的文章就介绍到这了,更多相关toRef与toRefs内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 #Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 #Vue.js
关于Vue中的options选项
Mar 22 #Vue.js
vue+echarts实现多条折线图
vue使用echarts实现折线图
浅谈Vue的computed计算属性
VUE中的v-if与v-show区别介绍
Mar 13 #Vue.js
You might like
Oracle 常见问题解答
2006/10/09 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
PHP递归创建多级目录
2015/11/05 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
javascript实用方法总结
2015/02/06 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python是编译运行的验证方法
2015/01/30 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
英语道歉信范文
2014/01/09 职场文书
大学班级文化建设方案
2014/05/06 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书