Contents
Tags

一、toValue() 将不同类型的输入(包括普通值、ref、getter)标准化为值

  • 基本使用
1toValue(1) //       --> 1
2toValue(ref(1)) //  --> 1
3toValue(() => 1) // --> 1

 

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

如果传入的是一个函数(getter),那么函数会被执行并返回结果;如果传入的是 ref,则返回其 value;否则直接返回原值

1/**
2 * Normalizes values / refs / getters to values.
3 * This is similar to {@link unref()}, except that it also normalizes getters.
4 * If the argument is a getter, it will be invoked and its return value will
5 * be returned.
6 *
7 * @example
8 * ```js
9 * toValue(1) // 1
10 * toValue(ref(1)) // 1
11 * toValue(() => 1) // 1
12 * ```
13 *
14 * @param source - A getter, an existing ref, or a non-function value.
15 * @see {@link https://vuejs.org/api/reactivity-utilities.html#tovalue}
16 */
17export function toValue<T>(
18  source: MaybeRefOrGetter<T> | ComputedRef<T> | ShallowRef<T>,
19): T {
20  return isFunction(source) ? source() : unref(source)
21}

 

二、toValue() 和 unref() 有什么区别

toValue 处理更广泛的情况,它不仅能处理 ref,还可以处理 getter,并且会自动执行 getter 并返回结果

unref 专注于处理 ref,如果传入的值不是 ref,则直接返回原值

 

三、其他

学习的记录,仅供参考