Vue3： toRefs与toRef的基本使用

一、前言

本文主要介绍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>

结果如下：