Contents
Tags

一、unref() 如果参数是 ref,则返回 ref.value,否则返回参数本身

unref 是一个辅助函数,用于简化处理 Ref 对象的过程,避免在每次使用时都需要手动检查和解包 Ref 对象的值

  • 基本使用
1function useFoo(x: number | Ref<number>) {
2  const unwrapped = unref(x); // number type
3}
4
5const num = 42;
6useFoo(num);  // 42
7
8const numRef = ref(99);
9useFoo(numRef);  // 99

 

  • 实现原理 (packages/reactivity/src/ref.ts)

通过 isRef 工具函数判断是否为 Ref 对象,是则返回封装的值,不是则返回参数本身

1/**
2 * Returns the inner value if the argument is a ref, otherwise return the
3 * argument itself. This is a sugar function for
4 * `val = isRef(val) ? val.value : val`.
5 *
6 * @example
7 * ```js
8 * function useFoo(x: number | Ref<number>) {
9 *   const unwrapped = unref(x)
10 *   // unwrapped is guaranteed to be number now
11 * }
12 * ```
13 *
14 * @param ref - Ref or plain value to be converted into the plain value.
15 * @see {@link https://vuejs.org/api/reactivity-utilities.html#unref}
16 */
17export function unref<T>(ref: MaybeRef<T> | ComputedRef<T> | ShallowRef<T>): T {
18  return isRef(ref) ? ref.value : ref
19}

 

二、其他

学习的记录,仅供参考