toRefs 与 toRef的作用:将一个响应式对象中的每一个属性,转换为ref
对象。不同之处 可参考代码
<template>
<div class="box">
<div>姓名:{{ person.name }},年龄:{{ person.age }}</div>
<el-text size="large" type="success">toRef取值</el-text>
<div>姓名:{{ anName }},年龄:{{ anAge }}</div>
<el-text size="large" type="success">toRefs取值</el-text>
<div>姓名:{{ name }},年龄:{{ age }}</div>
<el-button type="primary" @click="changeName">修改姓名</el-button>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRefs, toRef } from 'vue'
let person = reactive({ name: '张三', age: 18 })
// toRef可将person对象中的属性取出,且依然保持响应式的能力
let anAge = toRef(person, 'age')
let anName = toRef(person, 'name')
// 通过toRefs将person对象中的n个属性批量取出,且依然保持响应式的能力
let { name, age } = toRefs(person)
//修改姓名
function changeName(){
// 以下 三种方法 均可实现
name.value = '李小四'
// anName.value = '李小四'
// person.name = '李小四'
}
</script>