一、前言
本文主要介绍toRefs与toRef的基本使用。
二、内容
1、基本概念
- 作用:
toRefs与toRef可以将一个响应式对象中的每一 个属性，转换为ref对象； - 不同
toRefs与toRef功能一致，但toRefs可以批量转换。
2、toRefs
如果把reactive定义的数据直接解构出来，解构出来的数据并不是响应式的。举例：
- reactive定义的数据：
// 数据
let info = reactive({
age: 20,
height: 165,
});
- 直接解构出来：
let { age, height } = info;
console.log(age);
console.log(height);
-
结果如下：
-
使用toRefs将解构出来的值转换成响应式数据：
import { reactive, toRefs } from "vue";
let { age, height } = toRefs(info);
console.log(age);
console.log(height);
- 解构出来的数据已经变成响应式数据，这样当数据发生改变后，可以在页面上发生变化：
3、toRef
toRef一次只能将响应式数据里面的一对key-value转换成ref的格式
<script setup>
import { reactive, toRefs,toRef } from "vue";
// 数据
let info = reactive({
age: 20,
height: 165,
});
let age=toRef(info,"age")
console.log(age);
console.log(age.value);
</script>
结果如下：
