Vue3：可以使用.value获取ref（）包裹的值，为何还要存在unref（）
本文将介绍 unref（） 函数的示例，以及回答为什么可以使用.value获取ref（）包裹的值，还要存在unref（）。
使用 unref 的示例：
import { ref, reactive, unref } from 'vue';// 创建一个 ref
const count = ref(1);// 使用 unref 获取 ref 的原始值
const originalValue = unref(count);
console.log(originalValue); // 输出 1// 创建一个 reactive 对象
const state = reactive({name: 'Alice',age: 25
});// 使用 unref 获取 reactive 对象的属性值
const name = unref(state.name);
console.log(name); // 输出 'Alice'// 如果给 unref 传递一个普通值，它会直接返回该值
const normalValue = unref('Hello');
console.log(normalValue); // 输出 'Hello'在访问 ref 或 reactive 对象的值时，直接访问 .value 或对象的属性通常是更简单的方式。然而，unref 函数的存在有几个原因：
-
方便性和统一性：
unref提供了一种统一的方式来获取ref或reactive对象的原始值。无论是ref还是reactive对象，你都可以使用unref来获取它们的值，这种统一性使得代码更加一致且易于维护。 -
避免手动访问
.value：使用unref可以避免手动访问ref对象的.value属性或reactive对象的属性。虽然直接访问.value可能看起来更直观，但是在某些情况下，尤其是处理嵌套对象时，使用unref可以更简洁地获取值。 -
处理未知类型：有时候，我们可能不知道某个变量是一个普通值还是一个
ref或reactive对象。在这种情况下，使用unref可以确保我们始终能够获取到原始值，而不必担心是否需要访问.value。
虽然在许多情况下直接访问 .value 或对象的属性可能更简单，但是 unref 的存在为我们提供了一种更统一、更灵活的方式来处理响应式数据。