Vue computed() caching & invalidation — interactive playground

<div class="pg">
  <div class="pg-title">computed() caching &amp; invalidation</div>
  <p class="pg-sub">
    <code>total</code> is a real <code>computed()</code> deriving <code>price × qty</code>
    (optionally discounted). Watch the difference between <strong>writing</strong> to a
    dependency and <strong>reading</strong> the computed — they are not the same event.
  </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Change dependencies</div>

<div class="group-label">Tracked by the getter every run</div>
      <div class="btn-row">
        <button class="btn" id="btn-price">+1 price (now <span id="price-val">20</span>)</button>
        <button class="btn" id="btn-qty">+1 qty (now <span id="qty-val">3</span>)</button>
      </div>

<div class="group-label">Not read by the getter — a control group</div>
      <div class="btn-row">
        <button class="btn ghost" id="btn-unrelated">+1 unrelated ref (now <span id="unrelated-val">0</span>)</button>
      </div>

<div class="group-label">Conditionally tracked (only when the discount branch runs)</div>
      <div class="btn-row">
        <label class="toggle">
          <input type="checkbox" id="toggle-discount" />
          <span class="switch"></span>
          Apply discount
        </label>
        <button class="btn ghost" id="btn-discount">+5% discount rate (now <span id="discount-val">10</span>%)</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Read the computed</div>
      <div class="btn-row">
        <button class="btn primary" id="btn-read">Read total.value once</button>
        <button class="btn" id="btn-read5">Read total.value × 5</button>
      </div>

<div class="total-line">
        <span>Total (as of last read):</span>
        <span class="amount" id="total-display">$60.00</span>
        <span class="status good" id="dirty-pill"><span class="dot good"></span><span id="dirty-label">up to date</span></span>
      </div>
      <p class="deps">Tracked dependencies as of the last evaluation:
        <span id="deps-chips"><span class="chip">price</span><span class="chip">qty</span></span>
      </p>

<div class="stats">
        <div class="stat"><div class="label">Getter has run</div><div class="value" id="stat-runs">1×</div></div>
        <div class="stat"><div class="label">.value reads</div><div class="value" id="stat-reads">1</div></div>
        <div class="stat"><div class="label">Cache hits</div><div class="value" id="stat-hits">0</div></div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Timeline</div>
      <p class="hint" style="margin-top:0">
        Every write is logged the instant it happens. Every read is logged as either a
        <strong>cache hit</strong> (getter did not run) or a <strong>recompute</strong>
        (getter ran, count goes up). Reads and writes never happen at the same moment —
        that gap is the whole demo.
      </p>
      <div class="log" id="log" aria-live="polite"></div>
    </div>

</div>
</div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.

Vue computed() caching &amp; invalidation — interactive playground

Vue computed() caching & invalidation — interactive playground