【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 以保持代码简洁和一致性。