前言

最近在学习vue3时，自己学习到了ref、toRef和toRefs的相关常识，接下来自己将根据自己所学习到的部分有关常识对这三个处理呼应式数据的API进行解说。

1. ref：

作用：用用于创立一个包装根本数据类型的呼应式目标，也便是将一般的JavaScript值转换为呼应式目标。通常用于定义组件内部的呼应式数据。

示例

import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 输出 0
count.value  ;
console.log(count.value); // 输出 1

留意： ref 创立的目标是一个带有 value 特点的包装目标，经过 myVar.value 来拜访和修正值。
修正 ref 回来的目标的值，会触发视图更新。

2. toRef 函数：

作用：用于创立一个根据呼应式目标的特点的 ref 目标。当我们需求再组件内将一个呼应式目标的特点传递给另一个函数或者组件时，可以运用toRef创立一个根据呼应式目标特点的ref目标，这样就不需求直接将特点值传递过去了。

示例

import { ref, toRef } from 'vue';
const obj = reactive({ count: 0 });
const countRef = toRef(obj, 'count');
console.log(countRef.value); // 输出 0
obj.count  ;
console.log(countRef.value); // 输出 1

留意：toRef 回来的目标是一个对原始呼应式目标的特点的引用，修正 obj 中的特点会影响 toRef 回来的目标。

3. toRefs 函数：

作用：将一个呼应式目标转换为一般目标，其中目标的每个特点都是 ref 目标。这个函数通常在setup语法糖中被运用。

示例

import { reactive, toRefs } from 'vue';
const obj = reactive({ count: 0, name: 'wxc' });
const objRefs = toRefs(obj);
console.log(objRefs.count.value); // 输出 0
console.log(objRefs.name.value);  // 输出 'wxc'
obj.count  ;
console.log(objRefs.count.value); // 输出 1

留意： toRefs 回来的目标中的每个特点都是 ref 目标，可以经过 .value 拜访和修正。 修正原始目标的特点会反映在 toRefs 回来的目标上。

总结

总的来说，ref 用于创立根本数据类型的呼应式目标，toRef 用于创立根据呼应式目标的特点的 ref 目标，toRefs 用于将整个呼应式目标转换为包括 ref 目标的一般目标。也便是说：

• ref 主要用于包装根本数据类型，回来的目标需求经过 .value 拜访和修正值。
• toRef 用于创立根据呼应式目标的特点的 ref 目标，经过 .value 拜访和修正。
• toRefs 用于将整个呼应式目标的特点都变成 ref 目标，回来的目标中的每个特点可以经过 .value 拜访和修正。