HardJavaScriptTypeScript

Vue computed() — Lazy Cached Computation

VueVue.jsReactivitycomputedJavaScript

computed() is one of Vue's most powerful primitives. It creates a lazy, cached derived value that automatically re-evaluates when its reactive dependencies change.

const state = reactive({ n: 5 });
const doubled = computed(() => state.n * 2);

doubled.value; // → 10  (getter runs once)
doubled.value; // → 10  (cached — getter does NOT run again)

state.n = 20;
doubled.value; // → 40  (cache invalidated → getter re-runs)
doubled.value; // → 40  (cached again)

Three key properties

PropertyMeaning
LazyGetter is NOT called until .value is first accessed
CachedSubsequent reads reuse the result — getter runs at most once per dirty cycle
ReactiveWhen a tracked dependency changes, the cache is invalidated (dirty)

Your task

Implement computed(getter), reactive(obj), effect(fn), and _reset().

The solve(op, ...args) harness is provided — do not modify it.

Sample tests

Test #1computed reflects reactive state after mutation
Input: ["update",{"n":1},5]
Output: 105
Test #2getter is NOT called until .value is accessed
Input: ["lazy"]
Output: 0
Test #3getter is called only once for repeated .value reads
Input: ["cache"]
Output: 1
Test #4computed returns getter result
Input: ["basic",5]
Output: 10
Test #5computed reads from reactive state
Input: ["reactive",{"n":3},10]
Output: 30