0
# Computed Utilities
1

2
Enhanced computed utilities with manual control, eager evaluation, and reactive object returns.
3

4
## Capabilities
5

6
### computedEager
7

8
Computed that evaluates lazily but updates eagerly.
9

10
```typescript { .api }
11
/**
12
 * Computed that evaluates lazily but updates eagerly
13
 * @param fn - Computation function
14
 * @param options - Computed eager options
15
 * @returns Readonly ref with eager updates
16
 */
17
function computedEager<T>(fn: () => T, options?: ComputedEagerOptions): Readonly<Ref<T>>;
18

19
interface ComputedEagerOptions {
20
  deep?: boolean;
21
  onTrack?: (event: DebuggerEvent) => void;
22
  onTrigger?: (event: DebuggerEvent) => void;
23
}
24
```
25

26
**Usage Example:**
27

28
```typescript
29
import { computedEager, ref } from "@vueuse/shared";
30

31
const count = ref(0);
32

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

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

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

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

54
// Next access:
55
console.log(regularDouble.value); // Logs: "Regular computed calculated", then: 10
56
console.log(eagerDouble.value);   // Just: 10 (already calculated)
57
```
58

59
### computedWithControl
60

61
Computed with manual control over when it updates.
62

63
```typescript { .api }
64
/**
65
 * Computed with manual control over when it updates
66
 * @param source - Watch source or sources to control updates
67
 * @param fn - Computation function
68
 * @returns Computed with control methods
69
 */
70
function computedWithControl<T, S>(
71
  source: WatchSource<S> | WatchSource<S>[], 
72
  fn: () => T
73
): ComputedWithControl<T>;
74

75
interface ComputedWithControl<T> extends ComputedRef<T> {
76
  /** Trigger manual update */
77
  trigger(): void;
78
}
79
```
80

81
**Usage Example:**
82

83
```typescript
84
import { computedWithControl, ref } from "@vueuse/shared";
85

86
const firstName = ref('John');
87
const lastName = ref('Doe');
88
const updateTrigger = ref(0);
89

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

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

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

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

107
// Or trigger via the watch source
108
updateTrigger.value++;
109
console.log(fullName.value); // Also updates
110
```
111

112