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 函数的存在有几个原因：

1. 方便性和统一性：unref 提供了一种统一的方式来获取 ref 或 reactive 对象的原始值。无论是 ref 还是 reactive 对象，你都可以使用 unref 来获取它们的值，这种统一性使得代码更加一致且易于维护。

2. 避免手动访问 .value：使用 unref 可以避免手动访问 ref 对象的 .value 属性或 reactive 对象的属性。虽然直接访问 .value 可能看起来更直观，但是在某些情况下，尤其是处理嵌套对象时，使用 unref 可以更简洁地获取值。

3. 处理未知类型：有时候，我们可能不知道某个变量是一个普通值还是一个 ref 或 reactive 对象。在这种情况下，使用 unref 可以确保我们始终能够获取到原始值，而不必担心是否需要访问 .value。

虽然在许多情况下直接访问 .value 或对象的属性可能更简单，但是 unref 的存在为我们提供了一种更统一、更灵活的方式来处理响应式数据。