Vue 3.6 notify buffer & flush() — interactive playground

<div class="pg">
  <div class="pg-title">Vue 3.6 reactivity: the notify buffer &amp; flush() loop</div>
  <p class="pg-sub">
    This is a <strong>model</strong> of the real algorithm in Vue's <code>@vue/reactivity</code>
    package, not a live Vue instance — the notify buffer and <code>flush()</code> are internal,
    not exposed to application code, so there's no public way to show the fixed <em>and</em> the
    buggy behavior side by side from one real instance. Read the article for the
    real source: <a href="https://github.com/vuejs/core/issues/15674" target="_blank" rel="noopener">issue #15674</a>
    → <a href="https://github.com/vuejs/core/pull/15676" target="_blank" rel="noopener">PR #15676</a>.
  </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Configure the batch</div>

<div class="group-label">Vue version behavior being modeled</div>
      <div class="mode-row btn-row">
        <button class="btn active" id="mode-buggy" type="button">3.6.0-rc.9 (buggy)</button>
        <button class="btn" id="mode-fixed" type="button">3.6.0-rc.10 / 3.5.x (fixed)</button>
      </div>

<div class="group-label">Three effects, queued in this order every write: Watcher A → Computed getter → Watcher B</div>
      <div class="btn-row">
        <label class="toggle">
          <input type="checkbox" id="toggle-throw-computed" checked />
          <span class="switch"></span>
          Computed getter throws
        </label>
        <label class="toggle">
          <input type="checkbox" id="toggle-throw-b" />
          <span class="switch"></span>
          Watcher B also throws
        </label>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Run it</div>
      <div class="btn-row">
        <button class="btn primary" id="btn-write">① Write to source ref</button>
        <button class="btn" id="btn-unrelated">② Write to an unrelated ref</button>
        <button class="btn ghost" id="btn-reset">Reset</button>
      </div>

<div class="stats">
        <div class="stat"><div class="label">notifyIndex</div><div class="value" id="stat-index">0</div></div>
        <div class="stat"><div class="label">notifyBufferLength</div><div class="value" id="stat-length">0</div></div>
        <div class="stat"><div class="label">Rethrown error</div><div class="value" id="stat-error">none</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 call to <code>effect.notify()</code> is logged the instant it happens — in the buggy
        mode, watch the loop stop dead the moment the throwing effect runs, and watch button ②
        deliver the leftover effect late, attached to a write it has nothing to do with.
      </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 3.6 notify buffer &amp; flush() — interactive playground

Vue 3.6 notify buffer & flush() — interactive playground