Vue3中toRefs 与 toRef作用

本文主要是介绍Vue3中toRefs 与 toRef作用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

作用

将一个响应式对象中的每一个属性，转换为ref对象。

区别

toRefs与toRef功能一致，但toRefs`可以批量转换。

语法使用

<template><div class="person"><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h2>性别：{{person.gender}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeGender">修改性别</button></div>
</template><script lang="ts" setup name="Person">import {ref,reactive,toRefs,toRef} from 'vue'// 数据let person = reactive({name:'张三', age:18, gender:'男'})// 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力let {name,gender} =  toRefs(person)// 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力let age = toRef(person,'gender')// 方法function changeName(){name.value += '~'}function changeAge(){age.value += 1}function changeGender(){gender.value = '女'}
</script>

这篇关于Vue3中toRefs 与 toRef作用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---