其次就是了解ref，reactive的区别。
ref通过对象名.value来访问对象里的值，若对象里还有属性则访问其需要：对象名.value.属性名
reactive则通过：对象名.属性名，来直接访问属性值
其次，两者都是响应式对象。
但如果对直接对reactive对象进行赋值，那么其会丢失响应性。代码示例如下：
<script setup>
import { reactive } from 'vue';
const data = reactive({ name: "", age: "" });
// 假设这是从某个接口获取的新数据
const newData = { name: "New Name", age: 25 };
// 直接赋值会导致响应性丢失
data = newData;
</script>ref对象则不会。
针对reactive的toref（定义的ref对象的value与reaction中的属性相互绑定）、torefs（ref对象的value与reaction对象相互绑定）方法理解（一个绑定一个，一个绑定全部）
-
toRef：这个函数接收两个参数，第一个参数是一个reactive对象，第二个参数是该对象的一个属性名。toRef返回一个新的ref对象，这个ref对象的.value属性与reactive对象中对应的属性保持同步。当你修改这个ref对象的.value时，reactive对象中的对应属性也会更新，反之亦然。 -
toRefs：这个函数接收一个reactive对象作为参数，并返回一个对象，该对象的每个属性都是与reactive对象中对应属性保持同步的ref对象。这允许你在模板或其他组件中直接访问这些ref对象的.value，而无需通过reactive对象来访问。
下面是一个使用 toRef 和 toRefs 的例子：
<script setup>
import { reactive, toRef, toRefs } from 'vue';
const state = reactive({
name: 'John',
age: 30
});
// 使用 toRef
const nameRef = toRef(state, 'name');
// 使用 toRefs
const { ageRef } = toRefs(state);
// 更新 nameRef 的值
function updateName() {
nameRef.value = 'Jane';
}
// 更新 ageRef 的值
function updateAge() {
ageRef.value = 31;
}
</script>
<template>
<div>
<p>Name: {{ nameRef.value }}</p> <!-- 使用 toRef -->
<p>Age: {{ ageRef.value }}</p> <!-- 使用 toRefs -->
<button @click="updateName">Update Name</button>
<button @click="updateAge">Update Age</button>
</div>
</template>
在这个例子中，nameRef 和 ageRef 都是 ref 对象，它们的 .value 属性与 reactive 对象 state 中的 name 和 age 属性保持同步。因此，你可以像直接使用 ref 那样对它们进行赋值，而不会丢失响应性。