vue3.0 torefs,toref和torefs

　　本文主要介绍Vue3中toref和toref的区别。toRefs的功能和toRef一样，但是可以批量创建多个Ref对象。需要注意的是，它只解析对象的一级属性，语法直接传入object toRefs。以下更多详情，请参考各位朋友。

　　作用：创建一个ref对象，其值指向另一个对象中的属性。这样，属性名可以直接在模板中使用，而不需要在对象名前面加上前缀。

　　语法：

　　const name=toRef(person， name )

　　应用：当您想在一个响应对象中提供一个属性供外部单独使用时。

　　扩展：toRef的功能与toRef相同，但可以批量创建多个Ref对象。需要注意的是，它只解析对象的一级属性，语法直接传入对象toRefs(person)。

　　示例：

　　toRef

　　模板

　　span{{person}}/span

　　H2姓名：{ {姓名}}/h2

　　H2年龄：{{age}}/h2

　　H2薪资：{{salary}}K/h2

　　Button @click=name=~ 修改名称/button

　　按钮@click=age 增加年龄/按钮

　　Button @click=salary 加薪/button

　　/模板

　　脚本

　　从“vue”导入{reactive，toRef，toRef }

　　导出默认值{

　　名称：“应用程序”，

　　setup(){

　　让人=被动({

　　姓名：张三，

　　年龄：18，

　　工作：{

　　j1:{

　　工资：20英镑

　　}

　　}

　　})

　　返回{

　　Person，//如果像以前一样只定义了reactive后需要在模板中使用的属性，那么就要加上对象名(person.name)。

　　姓名：toRef(人，姓名)，

　　年龄：toRef(人，年龄)，

　　薪金：toRef(person.job.j1，薪金)

　　/*

　　但是有了toref，你可以反过来定义数据名，用toref转换成Ref的响应式基础数据。

　　模板中不需要添加对象名称，双向绑定。模板中的更改也会影响原始对象。

　　*/

　　}

　　}

　　}

　　/脚本

　　在线浏览效果：

　　toRefs

　　脚本

　　从“vue”导入{reactive，toRef，toRef }

　　导出默认值{

　　名称：“应用程序”，

　　setup(){

　　让人=被动({

　　姓名：张三，

　　年龄：18，

　　工作：{

　　j1:{

　　工资：20英镑

　　}

　　}

　　})

　　返回{

　　人，

　　.斗牛士(人)

　　/*

　　ToRefs会将第一层对象的所有属性转换成ref基本类型，所以使用ES6语法来扩展这些基本类型。

　　立正！ToRefs仅将第一层转换为ref原始类型。

　　*/

　　}

　　}

　　}

　　/脚本

　　浏览器效果图：

　　关于Vue3中toRef和toRef的区别这篇文章就到这里了。有关toRef和toRef的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。