Vue的学习之路-Composition API的响应式API工具函数

Vue 3的Composition API提供了一系列响应式API工具函数，运春基用于处理响应式数据。以下是这些工具函数的详细说明：

• isRef()

  功能：检查某个值是否为ref对象。

  类型：function isRef<T>(r: Ref<T> | unknown): r is Ref<T>

  用法：

  let foo: unknown;if (isRef(foo)) { // foo的类型被收窄为Ref<unknown> foo.value;}

• unref()

  功能：如果参数是ref，则返回内部值，否则返回参数本身。

  类型：function unref<T>(ref: T | Ref<T>): T

  用法：

  function useFoo(x: number | Ref<number>) { const unwrapped = unref(x); // unwrapped现在保证为number类型}

• toRef()

  功能：将值、refs或getters规范化为refs，或基于响应式对象上的属性创建对应的ref。

  类型：

  // 规范化签名function toRef<T>(value: T): T extends () => infer R ? Readonly<Ref<R>> : T extends Ref ? T : Ref<UnwrapRef<T>>;// 对象属性签名function toRef<T extends object, K extends keyof T>(object: T, key: K, defaultValue?: T[K]): ToRef<T[K]>;type ToRef<T> = T extends Ref ? T : Ref<T>;

  用法：

  // 规范化签名toRef(existingRef); // 返回现有的reftoRef(() => props.foo); // 创建只读reftoRef(1); // 创建普通ref// 对象属性签名const state = reactive({ foo: 1, bar: 2 });const fooRef = toRef(state, 'foo'); // 双向ref，与源属性同步

• toValue()

  功能：将值、refs或getters规范化为值，也会规范化getter函数。

  类型：function toValue<T>(source: T | Ref<T> | (() => T)): T

  用法：

  toValue(1); // 1toValue(ref(1)); // 1toValue(() => 1); // 1

• toRefs()

  功能：将一个响应式对象转换为普通对象，每个属性都是指向源对象相应属性的ref。

  类型：

  function toRefs<T extends object>(object: T): { [K in keyof T]: ToRef<T[K]> };type ToRef = T extends Ref ? T : Ref<T>;

  用法：

  const state = reactive({ foo: 1, bar: 2 });const stateAsRefs = toRefs(state);state.foo++; // stateAsRefs.foo.value 为 2

• isProxy()

  功能：检查对象是否由reactive()、readonly()、shallowReactive()或shallowReadonly()创建。

  类型：function isProxy(value: unknown): boolean

• isReactive()

  功能：检查旁谨对象是否由reactive()或shallowReactive()创建。

  类型：function isReactive(value: unknown): boolean

• isReadonly()

  功能：检查传入的值是否为只读对象。

  类型：function isReadonly(value: unknown): boolean

这些工具森歼函数在Vue 3的Composition API中非常重要，能够帮助开发者更灵活地处理响应式数据。