Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2.2 KiB
2.2 KiB
category, alias
| category | alias |
|---|---|
| Reactivity | controlledComputed |
computedWithControl
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`
)
With this, the changes of counter won't trigger computedRef to update but the source ref does.
// @include: main
// ---cut---
console.log(computedRef.value) // 0
counter.value += 1
console.log(computedRef.value) // 0
source.value = 'bar'
console.log(computedRef.value) // 1
Manual Triggering
You can also manually trigger the update of the computed by:
// @include: main
// ---cut---
const computedRef = computedWithControl(
() => source.value,
() => counter.value,
)
computedRef.trigger()
Deep Watch
Unlike computed, computedWithControl is shallow by default.
You can specify the same options as watch to control the behavior:
const source = ref({ name: 'foo' })
const computedRef = computedWithControl(
source,
() => counter.value,
{ deep: true },
)
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 type ComputedWithControlRef<T = any> =
| ComputedRefWithControl<T>
| WritableComputedRefWithControl<T>
export declare function computedWithControl<T>(
source: WatchSource | MultiWatchSources,
fn: ComputedGetter<T>,
options?: WatchOptions,
): ComputedRefWithControl<T>
export declare function computedWithControl<T>(
source: WatchSource | MultiWatchSources,
fn: WritableComputedOptions<T>,
options?: WatchOptions,
): WritableComputedRefWithControl<T>
/** @deprecated use `computedWithControl` instead */
export declare const controlledComputed: typeof computedWithControl