Vue3中toRef与toRefs的区别
作⽤：创建⼀个ref对象，其value值指向另外⼀个对象中的某个属性。这样在模板中就可以直接使⽤属性名⽽不⽤⿇烦的再加对象名前缀了。
语法：
const name = toRef(person,'name')
应⽤：要将响应式对象中的某个属性单独提供给外部使⽤时。
扩展：toRefs与toRef功能⼀致，但可以批量创建多个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 {
vue中reactiveperson,  //如果只是像之前⼀样定义reactive后模板中需要使⽤属性都要加上对象名（person.name）
name:toRef(person,'name'),
age:toRef(person,'age'),
salary:toRef(person.job.j1,'salary')
/*
但有了toRef后就可以在return中定义数据名称，使⽤toRef转换为ref的响应式基本数据，
在模板中就不⽤再繁琐的加对象名，并且是双向绑定，模板中的修改也会影响到原对象
*/
}
}
}
</script>
在线浏览效果：
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的区别的⽂章就介绍到这了，更多相关toRef与toRefs内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。