Vue nextTick & batching — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Vue's scheduler: batching &amp; nextTick</h1>
    <p class="pg-sub">
      Two experiments against the real Vue runtime. First: does writing a ref five times in a row
      re-run its effect five times? Second: right after you write a ref, is the DOM already updated —
      and when does <code>nextTick()</code> actually resolve?
    </p>

<div class="banner info" id="boot">Loading the real Vue runtime (3.5.41) from the CDN…</div>

<div class="panel" id="panel1" hidden>
      <div class="panel-label"><span class="n">1</span> Five writes, one render?</div>
      <p class="hint" style="margin-top:0">
        Click writes the same <code>ref</code> five times, synchronously, in a single click handler —
        no <code>await</code> between writes. Watch what the effect count does.
      </p>
      <div class="readout">
        <div class="cell"><b id="p1-writes">0</b><span>writes</span></div>
        <div class="cell"><b id="p1-renders">0</b><span>effect runs</span></div>
      </div>
      <div class="btn-row">
        <button class="btn primary" id="p1-go">Write the ref 5× synchronously</button>
        <button class="btn ghost" id="p1-reset">Reset</button>
      </div>
      <p class="hint" id="p1-verdict">Effect runs so far: 0. Click to find out if it's 5, or 1.</p>
    </div>

<div class="panel" id="panel2" hidden>
      <div class="panel-label"><span class="n">2</span> Sync read vs. <code>await nextTick()</code></div>
      <p class="hint" style="margin-top:0">
        Click increments <code>count</code>, an actual <code>&lt;b&gt;</code> element renders it via a
        <code>watchEffect</code>, and this panel reads that element's <code>textContent</code> twice:
        once <em>immediately</em> after the write (still inside the same synchronous script), and once
        after <code>await nextTick()</code>.
      </p>
      <div class="readout">
        <div class="cell"><b id="p2-count">0</b><span>count.value (data)</span></div>
        <div class="cell" id="p2-sync-cell"><b id="p2-sync">0</b><span>DOM, read sync</span></div>
        <div class="cell" id="p2-tick-cell"><b id="p2-tick">0</b><span>DOM, after nextTick</span></div>
      </div>
      <div class="btn-row">
        <button class="btn primary" id="p2-go">Increment once</button>
        <button class="btn ghost" id="p2-reset">Reset</button>
      </div>
      <div class="timeline" id="p2-timeline"></div>
    </div>

<div class="panel" id="logpanel" hidden>
      <div class="panel-label"><span class="n">3</span> The rule, in one sentence</div>
      <div class="code">A write doesn't paint the DOM — it <span class="hl">queues a job</span>.
Vue flushes that queue once, on a microtask, deduping repeat writes to the same job.

<span class="tok-cmt">// synchronous read after a write → still the old DOM</span>
<span class="tok-cmt">// await nextTick() → resolves after the flush, DOM confirmed fresh</span></div>
    </div>
  </div>

preview

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

Vue nextTick &amp; batching — interactive playground

Vue nextTick & batching — interactive playground