reactify

类别

Reactivity

导出体积

179 B

上次更改

6 minutes ago

别名

createReactiveFn

用法

基本示例

TypeScript

import { reactify
 } from '@vueuse/core'
import { shallowRef
 } from 'vue'

// 一个普通函数
function add
(a
: number, b
: number): number {
  return a
 + b

}

// 现在它接受引用并返回一个计算引用
// (a: number | Ref<number>, b: number | Ref<number>) => ComputedRef<number>
const reactiveAdd
 = reactify
(add
)

const a
 = shallowRef
(1)
const b
 = shallowRef
(2)
const sum
 = reactiveAdd
(a
, b
)

console
.log
(sum
.value
) // 3

a
.value
 = 5

console
.log
(sum
.value
) // 7

import { reactify } from '@vueuse/core'
import { shallowRef } from 'vue'
// 一个普通函数
function add(a, b) {
  return a + b
}
// 现在它接受引用并返回一个计算引用
// (a: number | Ref<number>, b: number | Ref<number>) => ComputedRef<number>
const reactiveAdd = reactify(add)
const a = shallowRef(1)
const b = shallowRef(2)
const sum = reactiveAdd(a, b)
console.log(sum.value) // 3
a.value = 5
console.log(sum.value) // 7

实现响应式勾股定理的示例。

TypeScript

import { reactify
 } from '@vueuse/core'
import { shallowRef
 } from 'vue'

const pow
 = reactify
(Math
.pow
)
const sqrt
 = reactify
(Math
.sqrt
)
const add
 = reactify
((a
: number, b
: number) => a
 + b
)

const a
 = shallowRef
(3)
const b
 = shallowRef
(4)
const c
 = sqrt
(add
(pow
(a
, 2), pow
(b
, 2)))
console
.log
(c
.value
) // 5

// 5:12:13
a
.value
 = 5
b
.value
 = 12
console
.log
(c
.value
) // 13

import { reactify } from '@vueuse/core'
import { shallowRef } from 'vue'
const pow = reactify(Math.pow)
const sqrt = reactify(Math.sqrt)
const add = reactify((a, b) => a + b)
const a = shallowRef(3)
const b = shallowRef(4)
const c = sqrt(add(pow(a, 2), pow(b, 2)))
console.log(c.value) // 5
// 5:12:13
a.value = 5
b.value = 12
console.log(c.value) // 13

你也可以这样做：

TypeScript

import { reactify
 } from '@vueuse/core'
import { shallowRef
 } from 'vue'

function pythagorean
(a
: number, b
: number) {
  return Math
.sqrt
(a
 ** 2 + b
 ** 2)
}

const a
 = shallowRef
(3)
const b
 = shallowRef
(4)

const c
 = reactify
(pythagorean
)(a
, b
)
console
.log
(c
.value
) // 5

import { reactify } from '@vueuse/core'
import { shallowRef } from 'vue'
function pythagorean(a, b) {
  return Math.sqrt(a ** 2 + b ** 2)
}
const a = shallowRef(3)
const b = shallowRef(4)
const c = reactify(pythagorean)(a, b)
console.log(c.value) // 5

另一个将 stringify 变为响应式的示例

import { reactify
 } from '@vueuse/core'
import { shallowRef
 } from 'vue'

const stringify
 = reactify
(JSON
.stringify
)

const obj
 = shallowRef
(42)
const dumped
 = stringify
(obj
)

console
.log
(dumped
.value
) // '42'

obj
.value
 = { foo
: 'bar' }

console
.log
(dumped
.value
) // '{"foo":"bar"}'

类型声明

export type Reactified
<T
, Computed
 extends boolean> = T
 extends (
  ...args
: infer A

) => infer R

  ? (
      ...args
: {
        [K
 in keyof A
]: Computed
 extends true
          ? MaybeRefOrGetter
<A
[K
]>
          : MaybeRef
<A
[K
]>
      }
    ) => ComputedRef
<R
>
  : never
export type ReactifyReturn
<
  T
 extends AnyFn
 = AnyFn
,
  K
 extends boolean = true,
> = Reactified
<T
, K
>
export interface ReactifyOptions
<T
 extends boolean> {
  /**
   * Accept passing a function as a reactive getter
   *
   * @default true
   */
  computedGetter
?: T

}
/**
 * 将普通函数转换为响应式函数。
 * 转换后的函数接受 ref 作为其参数，并返回一个具有正确类型的 ComputedRef。
 *
 * @param fn - 源函数
 * @param options - Options
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function reactify
<T
 extends AnyFn
, K
 extends boolean = true>(
  fn
: T
,
  options
?: ReactifyOptions
<K
>,
): ReactifyReturn
<T
, K
>
/** @deprecated use `reactify` instead */
export declare const createReactiveFn
: typeof reactify