computedWithControl

分类

响应性

导出大小

251 B

上次更改

上个月

别名

controlledComputed

用法

TypeScript

import { computedWithControl
 } from '@vueuse/core'

const source
 = ref
('foo')
const counter
 = ref
(0)

const computedRef
 = computedWithControl
(
  () => source
.value
, // watch source, same as `watch`
  () => counter
.value
, // computed getter, same as `computed`
)

import { computedWithControl } from '@vueuse/core'
const source = ref('foo')
const counter = ref(0)
const computedRef = computedWithControl(
  () => source.value, // watch source, same as `watch`
  () => counter.value,
)

有了它，counter 的变化将不会触发 computedRef 更新，但 source ref 会触发。

console
.log
(computedRef
.value
) // 0

counter
.value
 += 1

console
.log
(computedRef
.value
) // 0

source
.value
 = 'bar'

console
.log
(computedRef
.value
) // 1

手动触发

你也可以通过以下方式手动触发计算属性的更新：

const computedRef
 = computedWithControl
(
  () => source
.value
,
  () => counter
.value
,
)

computedRef
.trigger
()

深度监听

与 computed 不同，computedWithControl 默认是浅层监听。你可以指定与 watch 相同的选项来控制其行为

const source
 = ref
({ name
: 'foo' })

const computedRef
 = computedWithControl(
  source
,
  () => counter.value,
  { deep
: true },
)

类型声明

export interface ComputedWithControlRefExtra {
  /**
   * Force update the computed value.
   */
  trigger
: () => void
}
export interface ComputedRefWithControl
<T
>
  extends ComputedRef
<T
>,
    ComputedWithControlRefExtra {}
export interface WritableComputedRefWithControl
<T
>
  extends WritableComputedRef
<T
>,
    ComputedWithControlRefExtra {}
export type ComputedWithControlRef
<T
 = any> =
  | ComputedRefWithControl
<T
>
  | WritableComputedRefWithControl
<T
>
export declare function computedWithControl
<T
, S
>(
  source
: WatchSource
<S
> | WatchSource
<S
>[],
  fn
: ComputedGetter
<T
>,
  options
?: WatchOptions
,
): ComputedRefWithControl
<T
>
export declare function computedWithControl
<T
, S
>(
  source
: WatchSource
<S
> | WatchSource
<S
>[],
  fn
: WritableComputedOptions
<T
>,
  options
?: WatchOptions
,
): WritableComputedRefWithControl
<T
>
/** @deprecated use `computedWithControl` instead */
export declare const controlledComputed
: typeof computedWithControl