Vue watch vs watchEffect — race condition playground

<div class="pg">
  <div class="pg-title">watch() race condition: no cleanup vs onWatcherCleanup</div>
  <p class="pg-sub">
    Two real Vue <code>watch()</code> callbacks watch two refs. Both refs get typed the same word,
    at the same speed, against a fake network with the same (scripted) response delays. Only one
    watcher cancels its stale request when a newer one starts.
  </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Run the scripted typing sequence</div>
      <p class="hint" style="margin-top:0">
        Simulates typing "vue" one letter at a time, ~150ms apart. The fake network is scripted so the
        response for <code>v</code> takes the longest — long enough to still be in flight when <code>vu</code>
        and <code>vue</code> are typed after it.
      </p>
      <div class="typed-line">
        <span class="char" id="ch-v">v</span><span class="char" id="ch-vu">u</span><span class="char" id="ch-vue">e</span>
      </div>
      <div class="btn-row">
        <button class="btn primary" id="btn-run">▶ Type "v" → "vu" → "vue"</button>
        <button class="btn ghost" id="btn-reset">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What each panel is showing, on screen, right now</div>
      <div class="cols">
        <div>
          <div class="col-title">❌ watch() — no cleanup</div>
          <div class="result-box">
            <div class="q">last query whose response was written: <span id="buggy-q">—</span></div>
            <div class="items" id="buggy-items">(nothing yet)</div>
          </div>
          <div class="verdict" id="buggy-verdict"></div>
        </div>
        <div>
          <div class="col-title">✅ watch() + onWatcherCleanup</div>
          <div class="result-box">
            <div class="q">last query whose response was written: <span id="fixed-q">—</span></div>
            <div class="items" id="fixed-items">(nothing yet)</div>
          </div>
          <div class="verdict" id="fixed-verdict"></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 dispatch, abort, and write is logged the instant it happens, tagged by which watcher it belongs to.
      </p>
      <div class="log small-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.