Computed Utilities

/**
 * Computed that evaluates lazily but updates eagerly
 * @param fn - Computation function
 * @param options - Computed eager options
 * @returns Readonly ref with eager updates
 */
function computedEager<T>(fn: () => T, options?: ComputedEagerOptions): Readonly<Ref<T>>;

interface ComputedEagerOptions {
  deep?: boolean;
  onTrack?: (event: DebuggerEvent) => void;
  onTrigger?: (event: DebuggerEvent) => void;
}

import { computedEager, ref } from "@vueuse/shared";

const count = ref(0);

// Regular computed (lazy evaluation)
const regularDouble = computed(() => {
  console.log('Regular computed calculated');
  return count.value * 2;
});

// Eager computed (eager updates)
const eagerDouble = computedEager(() => {
  console.log('Eager computed calculated');
  return count.value * 2;
});

// Access triggers initial calculation for both
console.log(regularDouble.value); // Logs: "Regular computed calculated", then: 2
console.log(eagerDouble.value);   // Logs: "Eager computed calculated", then: 2

// Change triggers different behavior
count.value = 5;
// Regular: waits until next access to recalculate
// Eager: recalculates immediately

// Next access:
console.log(regularDouble.value); // Logs: "Regular computed calculated", then: 10
console.log(eagerDouble.value);   // Just: 10 (already calculated)

/**
 * Computed with manual control over when it updates
 * @param source - Watch source or sources to control updates
 * @param fn - Computation function
 * @returns Computed with control methods
 */
function computedWithControl<T, S>(
  source: WatchSource<S> | WatchSource<S>[], 
  fn: () => T
): ComputedWithControl<T>;

interface ComputedWithControl<T> extends ComputedRef<T> {
  /** Trigger manual update */
  trigger(): void;
}

import { computedWithControl, ref } from "@vueuse/shared";

const firstName = ref('John');
const lastName = ref('Doe');
const updateTrigger = ref(0);

// Only updates when updateTrigger changes, not when name parts change
const fullName = computedWithControl(
  updateTrigger,
  () => `${firstName.value} ${lastName.value}`
);

console.log(fullName.value); // 'John Doe'

// Changing names doesn't automatically update computed
firstName.value = 'Jane';
lastName.value = 'Smith';
console.log(fullName.value); // Still 'John Doe'

// Manual trigger updates the computed
fullName.trigger();
console.log(fullName.value); // 'Jane Smith'

// Or trigger via the watch source
updateTrigger.value++;
console.log(fullName.value); // Also updates