VueUsecomputedWithControl
Explicitly define the dependencies of computed.
显式定义计算属性的依赖。
Usage
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, // computed getter, same as `computed`
)
With this, the changes of counter won't trigger computedRef to update but the source ref does.
这种情况下，只有 source 的改变会触发 computedRef 的更新，而改变 counter 不会。
console.log(computedRef.value) // 0
counter.value += 1
console.log(computedRef.value) // 0
source.value = 'bar'
console.log(computedRef.value) // 1
console.log(computedRef.value) // 0
counter.value += 1
console.log(computedRef.value) // 0
source.value = 'bar'
console.log(computedRef.value) // 1
Manual Triggering 手动触发
This only works in Vue 3 只在 Vue3 下生效
You can also manually trigger the update of the computed by:
可以通过以下方式主动触发更新：
const computedRef = computedWithControl(
() => source.value,
() => counter.value,
)
computedRef.trigger()
const computedRef = computedWithControl(
() => source.value,
() => counter.value,
)
computedRef.trigger()
Type Declarations
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 declare function computedWithControl<T, S>(
source: WatchSource<S> | WatchSource<S>[],
fn: ComputedGetter<T>
): ComputedRefWithControl<T>
export declare function computedWithControl<T, S>(
source: WatchSource<S> | WatchSource<S>[],
fn: WritableComputedOptions<T>
): WritableComputedRefWithControl<T>
export { computedWithControl as controlledComputed }
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 declare function computedWithControl<T, S>(
source: WatchSource<S> | WatchSource<S>[],
fn: ComputedGetter<T>
): ComputedRefWithControl<T>
export declare function computedWithControl<T, S>(
source: WatchSource<S> | WatchSource<S>[],
fn: WritableComputedOptions<T>
): WritableComputedRefWithControl<T>
export { computedWithControl as controlledComputed }
Source
Contributors
Anthony Fu
lzdFeiFei
kongmoumou