Vue3中的toRef与toRefs

toRef

toRef可以将响应式数据对象中的的某个属性变为可以单独调用的响应式数据，值与之前的对象相关联

<script>
import { ref,reactive,toRef} from 'vue'
export default{
    setup() {
        let person = reactive({
            name:"李四",
            age:18,
            sex:"男"
        })
        
        return {
            name:toRef(person,'name'),
            age:toRef(person,'age'),
            sex:toRef(person,'sex')
        }
    }
}
</script>

<template>
  <h1>{{name}}</h1>
  <h1>{{age}}</h1>
  <h1>{{sex}}</h1>
</template>

<style scoped>

</style>

toRefs

toRefs可以将响应式数据对象中的所有值变为可单独调用的响应式数据，每个的值与之前的对象相关联

<script>
import { ref,reactive,toRefs} from 'vue'
export default{
    setup() {
        let person = reactive({
            name:"李四",
            age:19,
            sex:"男"
        })
        
        return {
            ...toRefs(person),
        }
    }
}
</script>

<template>
  <h1>{{name}}</h1>
  <h1>{{age}}</h1>
  <h1>{{sex}}</h1>
</template>

<style scoped>

</style>