浅聊vue3中的ref、toRef、toRefs

前言

最近在学习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 访问和修改。