【Vue3】 中的 【unref】：详解与使用

在 Vue 3 中，unref 是一个来自 @vue/reactivity 模块的辅助函数，它通常用于解包 ref 或从响应式对象中获取原始值。这个函数可以让我们轻松地从一个可能是 ref 或其他响应式对象的变量中提取出其实际的值。

1. unref 的作用

Vue 3 中的响应式系统基于 Proxy 和 ref，当你通过 ref 创建一个响应式变量时，返回的是一个包含 .value 的对象。例如：

const myRef = ref(10);

为了访问 myRef 中的值，我们通常需要使用 .value：

console.log(myRef.value); // 输出 10

但有时我们并不确定某个变量是否是 ref 对象，unref 可以帮助我们自动处理这一过程。如果变量是 ref，unref 会返回其 .value；如果它不是 ref，则直接返回该值本身。

2. unref 的基本用法

import { ref, unref } from 'vue';

// 创建一个 ref
const myRef = ref(10);

// 直接使用 unref 获取值
console.log(unref(myRef));  // 输出 10

// 如果是一个普通的值
const normalValue = 20;
console.log(unref(normalValue)); // 输出 20（不会报错）

3. unref 的实用场景

3.1 函数中处理响应式数据

在开发 Vue 3 应用时，可能会遇到需要处理响应式数据的场景，尤其是在编写某些通用的工具函数时，你可能不知道传入的数据是 ref 还是普通数据。在这种情况下，unref 可以帮助你避免手动检查数据类型。

import { ref, unref } from 'vue';

const myRef = ref(10);
const normalValue = 20;

// 一个函数，它可能接受 ref 或普通值
function printValue(value) {
  // 使用 unref 来确保我们直接获取原始值
  console.log(unref(value));
}

printValue(myRef);        // 输出 10
printValue(normalValue);  // 输出 20

3.2 在 computed 中使用 unref

在 computed 或 watch 等响应式 API 中，unref 也非常有用，因为它能够让你直接处理 ref 或普通值，避免显式使用 .value。

import { ref, computed, unref } from 'vue';

const count = ref(10);

// 使用 unref 让计算属性更加简洁
const doubledCount = computed(() => unref(count) * 2);

console.log(doubledCount.value); // 输出 20

3.3 与 watch 配合使用

watch 是 Vue 3 中的另一个响应式 API，通常需要传入一个响应式数据或 ref。但在实际使用时，如果你不确定某个数据是否是 ref，可以使用 unref 来确保无论输入是什么，最终都能得到正确的值。

import { ref, watch, unref } from 'vue';

const count = ref(10);

watch(() => unref(count), (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

// 触发 count 的变化
count.value = 20;

4. unref 的类型推断

在 Vue 3 中，unref 会根据传入的值类型自动推断返回类型。如果传入的是 ref，它会返回 ref 的值类型；如果传入的是普通值，它会直接返回该值。

import { ref, unref } from 'vue';

const count = ref(10);
const message = "Hello, world!";

// unref 会自动推断类型
const unrefCount: number = unref(count);
const unrefMessage: string = unref(message);

5. 总结：unref 的优势

• 简化代码 ：当你不确定传入值是否是 ref 时，使用 unref 可以避免手动检查并简化代码。
• 自动解包 ：它会自动解包 ref 对象，返回实际的值。
• 灵活性 ：适用于需要处理 ref 或普通值的通用场景。

6. 与 reactive 配合使用

虽然 unref 主要与 ref 一起使用，但它也可以与 reactive 配合工作，尤其是在处理复杂的响应式对象时。

import { reactive, unref } from 'vue';

const state = reactive({
  count: ref(10),
});

console.log(unref(state.count)); // 输出 10

这样，你可以避免直接使用 .value，使代码更加干净和一致。

总结

unref 是一个非常有用的工具函数，可以帮助我们从 ref 或普通值中提取实际的值。它在处理 Vue 3 中的响应式数据时尤其有用，简化了代码逻辑，避免了手动判断和解包操作。如果你在处理 ref 或 reactive 对象时，推荐使用 unref 以保持代码简洁和一致性。