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 相关文章推荐
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 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
重置版宣传动画
2020/04/09 魔兽争霸
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
vue.js的安装方法
2017/05/12 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
angular中的cookie读写方法
2017/08/02 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
Python文件处理
2016/02/29 Python
python数据处理实战(必看篇)
2017/06/11 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python中如何打包用户自定义模块
2020/09/23 Python
linux面试题参考答案(8)
2015/08/11 面试题
常见的软件开发流程有哪些
2015/11/14 面试题
介绍一下Ruby的多线程处理
2013/02/01 面试题
党员承诺书格式
2014/05/21 职场文书
学生检讨书范文
2014/10/30 职场文书
公安机关起诉意见书
2015/05/20 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js
分享几个实用的CSS代码块
2022/06/10 HTML / CSS