@vue/reactivity 3.5.16 → 3.6.0-alpha.1

package/dist/reactivity.global.js

@@ -1,5 +1,5 @@
 /**
-* @vue/reactivity v3.5.16
+* @vue/reactivity v3.6.0-alpha.1
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -18,12 +18,6 @@ var VueReactivity = (function (exports) {
   const NOOP = () => {
   };
   const extend = Object.assign;
-  const remove = (arr, el) => {
-    const i = arr.indexOf(el);
-    if (i > -1) {
-      arr.splice(i, 1);
-    }
-  };
   const hasOwnProperty$1 = Object.prototype.hasOwnProperty;
   const hasOwn = (val, key) => hasOwnProperty$1.call(val, key);
   const isArray = Array.isArray;
@@ -64,628 +58,346 @@ var VueReactivity = (function (exports) {
     console.warn(`[Vue warn] ${msg}`, ...args);
   }
 
-  let activeEffectScope;
-  class EffectScope {
-    constructor(detached = false) {
-      this.detached = detached;
-      /**
-       * @internal
-       */
-      this._active = true;
-      /**
-       * @internal track `on` calls, allow `on` call multiple times
-       */
-      this._on = 0;
-      /**
-       * @internal
-       */
-      this.effects = [];
-      /**
-       * @internal
-       */
-      this.cleanups = [];
-      this._isPaused = false;
-      this.parent = activeEffectScope;
-      if (!detached && activeEffectScope) {
-        this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
-          this
-        ) - 1;
-      }
-    }
-    get active() {
-      return this._active;
-    }
-    pause() {
-      if (this._active) {
-        this._isPaused = true;
-        let i, l;
-        if (this.scopes) {
-          for (i = 0, l = this.scopes.length; i < l; i++) {
-            this.scopes[i].pause();
-          }
-        }
-        for (i = 0, l = this.effects.length; i < l; i++) {
-          this.effects[i].pause();
-        }
-      }
-    }
-    /**
-     * Resumes the effect scope, including all child scopes and effects.
-     */
-    resume() {
-      if (this._active) {
-        if (this._isPaused) {
-          this._isPaused = false;
-          let i, l;
-          if (this.scopes) {
-            for (i = 0, l = this.scopes.length; i < l; i++) {
-              this.scopes[i].resume();
-            }
-          }
-          for (i = 0, l = this.effects.length; i < l; i++) {
-            this.effects[i].resume();
-          }
-        }
-      }
-    }
-    run(fn) {
-      if (this._active) {
-        const currentEffectScope = activeEffectScope;
-        try {
-          activeEffectScope = this;
-          return fn();
-        } finally {
-          activeEffectScope = currentEffectScope;
-        }
-      } else {
-        warn(`cannot run an inactive effect scope.`);
-      }
-    }
-    /**
-     * This should only be called on non-detached scopes
-     * @internal
-     */
-    on() {
-      if (++this._on === 1) {
-        this.prevScope = activeEffectScope;
-        activeEffectScope = this;
-      }
-    }
-    /**
-     * This should only be called on non-detached scopes
-     * @internal
-     */
-    off() {
-      if (this._on > 0 && --this._on === 0) {
-        activeEffectScope = this.prevScope;
-        this.prevScope = void 0;
-      }
-    }
-    stop(fromParent) {
-      if (this._active) {
-        this._active = false;
-        let i, l;
-        for (i = 0, l = this.effects.length; i < l; i++) {
-          this.effects[i].stop();
-        }
-        this.effects.length = 0;
-        for (i = 0, l = this.cleanups.length; i < l; i++) {
-          this.cleanups[i]();
-        }
-        this.cleanups.length = 0;
-        if (this.scopes) {
-          for (i = 0, l = this.scopes.length; i < l; i++) {
-            this.scopes[i].stop(true);
-          }
-          this.scopes.length = 0;
-        }
-        if (!this.detached && this.parent && !fromParent) {
-          const last = this.parent.scopes.pop();
-          if (last && last !== this) {
-            this.parent.scopes[this.index] = last;
-            last.index = this.index;
-          }
-        }
-        this.parent = void 0;
-      }
-    }
-  }
-  function effectScope(detached) {
-    return new EffectScope(detached);
-  }
-  function getCurrentScope() {
-    return activeEffectScope;
-  }
-  function onScopeDispose(fn, failSilently = false) {
-    if (activeEffectScope) {
-      activeEffectScope.cleanups.push(fn);
-    } else if (!failSilently) {
-      warn(
-        `onScopeDispose() is called when there is no active effect scope to be associated with.`
-      );
-    }
-  }
-
-  let activeSub;
-  const EffectFlags = {
-    "ACTIVE": 1,
-    "1": "ACTIVE",
-    "RUNNING": 2,
-    "2": "RUNNING",
-    "TRACKING": 4,
-    "4": "TRACKING",
-    "NOTIFIED": 8,
-    "8": "NOTIFIED",
-    "DIRTY": 16,
-    "16": "DIRTY",
-    "ALLOW_RECURSE": 32,
-    "32": "ALLOW_RECURSE",
-    "PAUSED": 64,
-    "64": "PAUSED",
-    "EVALUATED": 128,
-    "128": "EVALUATED"
-  };
-  const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
-  class ReactiveEffect {
-    constructor(fn) {
-      this.fn = fn;
-      /**
-       * @internal
-       */
-      this.deps = void 0;
-      /**
-       * @internal
-       */
-      this.depsTail = void 0;
-      /**
-       * @internal
-       */
-      this.flags = 1 | 4;
-      /**
-       * @internal
-       */
-      this.next = void 0;
-      /**
-       * @internal
-       */
-      this.cleanup = void 0;
-      this.scheduler = void 0;
-      if (activeEffectScope && activeEffectScope.active) {
-        activeEffectScope.effects.push(this);
-      }
-    }
-    pause() {
-      this.flags |= 64;
-    }
-    resume() {
-      if (this.flags & 64) {
-        this.flags &= -65;
-        if (pausedQueueEffects.has(this)) {
-          pausedQueueEffects.delete(this);
-          this.trigger();
-        }
-      }
-    }
-    /**
-     * @internal
-     */
-    notify() {
-      if (this.flags & 2 && !(this.flags & 32)) {
-        return;
-      }
-      if (!(this.flags & 8)) {
-        batch(this);
-      }
-    }
-    run() {
-      if (!(this.flags & 1)) {
-        return this.fn();
-      }
-      this.flags |= 2;
-      cleanupEffect(this);
-      prepareDeps(this);
-      const prevEffect = activeSub;
-      const prevShouldTrack = shouldTrack;
-      activeSub = this;
-      shouldTrack = true;
-      try {
-        return this.fn();
-      } finally {
-        if (activeSub !== this) {
-          warn(
-            "Active effect was not restored correctly - this is likely a Vue internal bug."
-          );
-        }
-        cleanupDeps(this);
-        activeSub = prevEffect;
-        shouldTrack = prevShouldTrack;
-        this.flags &= -3;
-      }
-    }
-    stop() {
-      if (this.flags & 1) {
-        for (let link = this.deps; link; link = link.nextDep) {
-          removeSub(link);
-        }
-        this.deps = this.depsTail = void 0;
-        cleanupEffect(this);
-        this.onStop && this.onStop();
-        this.flags &= -2;
-      }
-    }
-    trigger() {
-      if (this.flags & 64) {
-        pausedQueueEffects.add(this);
-      } else if (this.scheduler) {
-        this.scheduler();
-      } else {
-        this.runIfDirty();
-      }
-    }
-    /**
-     * @internal
-     */
-    runIfDirty() {
-      if (isDirty(this)) {
-        this.run();
-      }
-    }
-    get dirty() {
-      return isDirty(this);
-    }
-  }
+  var ReactiveFlags$1 = /* @__PURE__ */ ((ReactiveFlags2) => {
+    ReactiveFlags2[ReactiveFlags2["None"] = 0] = "None";
+    ReactiveFlags2[ReactiveFlags2["Mutable"] = 1] = "Mutable";
+    ReactiveFlags2[ReactiveFlags2["Watching"] = 2] = "Watching";
+    ReactiveFlags2[ReactiveFlags2["RecursedCheck"] = 4] = "RecursedCheck";
+    ReactiveFlags2[ReactiveFlags2["Recursed"] = 8] = "Recursed";
+    ReactiveFlags2[ReactiveFlags2["Dirty"] = 16] = "Dirty";
+    ReactiveFlags2[ReactiveFlags2["Pending"] = 32] = "Pending";
+    return ReactiveFlags2;
+  })(ReactiveFlags$1 || {});
+  const notifyBuffer = [];
   let batchDepth = 0;
-  let batchedSub;
-  let batchedComputed;
-  function batch(sub, isComputed = false) {
-    sub.flags |= 8;
-    if (isComputed) {
-      sub.next = batchedComputed;
-      batchedComputed = sub;
-      return;
+  let activeSub = void 0;
+  let notifyIndex = 0;
+  let notifyBufferLength = 0;
+  function setActiveSub(sub) {
+    try {
+      return activeSub;
+    } finally {
+      activeSub = sub;
     }
-    sub.next = batchedSub;
-    batchedSub = sub;
   }
   function startBatch() {
-    batchDepth++;
+    ++batchDepth;
   }
   function endBatch() {
-    if (--batchDepth > 0) {
-      return;
+    if (!--batchDepth && notifyBufferLength) {
+      flush();
     }
-    if (batchedComputed) {
-      let e = batchedComputed;
-      batchedComputed = void 0;
-      while (e) {
-        const next = e.next;
-        e.next = void 0;
-        e.flags &= -9;
-        e = next;
-      }
-    }
-    let error;
-    while (batchedSub) {
-      let e = batchedSub;
-      batchedSub = void 0;
-      while (e) {
-        const next = e.next;
-        e.next = void 0;
-        e.flags &= -9;
-        if (e.flags & 1) {
-          try {
-            ;
-            e.trigger();
-          } catch (err) {
-            if (!error) error = err;
-          }
-        }
-        e = next;
-      }
-    }
-    if (error) throw error;
   }
-  function prepareDeps(sub) {
-    for (let link = sub.deps; link; link = link.nextDep) {
-      link.version = -1;
-      link.prevActiveLink = link.dep.activeLink;
-      link.dep.activeLink = link;
-    }
-  }
-  function cleanupDeps(sub) {
-    let head;
-    let tail = sub.depsTail;
-    let link = tail;
-    while (link) {
-      const prev = link.prevDep;
-      if (link.version === -1) {
-        if (link === tail) tail = prev;
-        removeSub(link);
-        removeDep(link);
-      } else {
-        head = link;
-      }
-      link.dep.activeLink = link.prevActiveLink;
-      link.prevActiveLink = void 0;
-      link = prev;
+  function link(dep, sub) {
+    const prevDep = sub.depsTail;
+    if (prevDep !== void 0 && prevDep.dep === dep) {
+      return;
     }
-    sub.deps = head;
-    sub.depsTail = tail;
-  }
-  function isDirty(sub) {
-    for (let link = sub.deps; link; link = link.nextDep) {
-      if (link.dep.version !== link.version || link.dep.computed && (refreshComputed(link.dep.computed) || link.dep.version !== link.version)) {
-        return true;
+    let nextDep = void 0;
+    const recursedCheck = sub.flags & 4 /* RecursedCheck */;
+    if (recursedCheck) {
+      nextDep = prevDep !== void 0 ? prevDep.nextDep : sub.deps;
+      if (nextDep !== void 0 && nextDep.dep === dep) {
+        sub.depsTail = nextDep;
+        return;
       }
     }
-    if (sub._dirty) {
-      return true;
-    }
-    return false;
-  }
-  function refreshComputed(computed) {
-    if (computed.flags & 4 && !(computed.flags & 16)) {
+    const prevSub = dep.subsTail;
+    if (prevSub !== void 0 && prevSub.sub === sub && (!recursedCheck || isValidLink(prevSub, sub))) {
       return;
     }
-    computed.flags &= -17;
-    if (computed.globalVersion === globalVersion) {
-      return;
+    const newLink = sub.depsTail = dep.subsTail = {
+      dep,
+      sub,
+      prevDep,
+      nextDep,
+      prevSub,
+      nextSub: void 0
+    };
+    if (nextDep !== void 0) {
+      nextDep.prevDep = newLink;
     }
-    computed.globalVersion = globalVersion;
-    if (!computed.isSSR && computed.flags & 128 && (!computed.deps && !computed._dirty || !isDirty(computed))) {
-      return;
+    if (prevDep !== void 0) {
+      prevDep.nextDep = newLink;
+    } else {
+      sub.deps = newLink;
     }
-    computed.flags |= 2;
-    const dep = computed.dep;
-    const prevSub = activeSub;
-    const prevShouldTrack = shouldTrack;
-    activeSub = computed;
-    shouldTrack = true;
-    try {
-      prepareDeps(computed);
-      const value = computed.fn(computed._value);
-      if (dep.version === 0 || hasChanged(value, computed._value)) {
-        computed.flags |= 128;
-        computed._value = value;
-        dep.version++;
-      }
-    } catch (err) {
-      dep.version++;
-      throw err;
-    } finally {
-      activeSub = prevSub;
-      shouldTrack = prevShouldTrack;
-      cleanupDeps(computed);
-      computed.flags &= -3;
+    if (prevSub !== void 0) {
+      prevSub.nextSub = newLink;
+    } else {
+      dep.subs = newLink;
     }
   }
-  function removeSub(link, soft = false) {
-    const { dep, prevSub, nextSub } = link;
-    if (prevSub) {
-      prevSub.nextSub = nextSub;
-      link.prevSub = void 0;
+  function unlink(link2, sub = link2.sub) {
+    const dep = link2.dep;
+    const prevDep = link2.prevDep;
+    const nextDep = link2.nextDep;
+    const nextSub = link2.nextSub;
+    const prevSub = link2.prevSub;
+    if (nextDep !== void 0) {
+      nextDep.prevDep = prevDep;
+    } else {
+      sub.depsTail = prevDep;
     }
-    if (nextSub) {
-      nextSub.prevSub = prevSub;
-      link.nextSub = void 0;
+    if (prevDep !== void 0) {
+      prevDep.nextDep = nextDep;
+    } else {
+      sub.deps = nextDep;
     }
-    if (dep.subsHead === link) {
-      dep.subsHead = nextSub;
+    if (nextSub !== void 0) {
+      nextSub.prevSub = prevSub;
+    } else {
+      dep.subsTail = prevSub;
     }
-    if (dep.subs === link) {
-      dep.subs = prevSub;
-      if (!prevSub && dep.computed) {
-        dep.computed.flags &= -5;
-        for (let l = dep.computed.deps; l; l = l.nextDep) {
-          removeSub(l, true);
+    if (prevSub !== void 0) {
+      prevSub.nextSub = nextSub;
+    } else if ((dep.subs = nextSub) === void 0) {
+      let toRemove = dep.deps;
+      if (toRemove !== void 0) {
+        do {
+          toRemove = unlink(toRemove, dep);
+        } while (toRemove !== void 0);
+        dep.flags |= 16 /* Dirty */;
+      }
+    }
+    return nextDep;
+  }
+  function propagate(link2) {
+    let next = link2.nextSub;
+    let stack;
+    top: do {
+      const sub = link2.sub;
+      let flags = sub.flags;
+      if (flags & (1 /* Mutable */ | 2 /* Watching */)) {
+        if (!(flags & (4 /* RecursedCheck */ | 8 /* Recursed */ | 16 /* Dirty */ | 32 /* Pending */))) {
+          sub.flags = flags | 32 /* Pending */;
+        } else if (!(flags & (4 /* RecursedCheck */ | 8 /* Recursed */))) {
+          flags = 0 /* None */;
+        } else if (!(flags & 4 /* RecursedCheck */)) {
+          sub.flags = flags & -9 /* Recursed */ | 32 /* Pending */;
+        } else if (!(flags & (16 /* Dirty */ | 32 /* Pending */)) && isValidLink(link2, sub)) {
+          sub.flags = flags | 8 /* Recursed */ | 32 /* Pending */;
+          flags &= 1 /* Mutable */;
+        } else {
+          flags = 0 /* None */;
+        }
+        if (flags & 2 /* Watching */) {
+          notifyBuffer[notifyBufferLength++] = sub;
+        }
+        if (flags & 1 /* Mutable */) {
+          const subSubs = sub.subs;
+          if (subSubs !== void 0) {
+            link2 = subSubs;
+            if (subSubs.nextSub !== void 0) {
+              stack = { value: next, prev: stack };
+              next = link2.nextSub;
+            }
+            continue;
+          }
         }
       }
-    }
-    if (!soft && !--dep.sc && dep.map) {
-      dep.map.delete(dep.key);
-    }
-  }
-  function removeDep(link) {
-    const { prevDep, nextDep } = link;
-    if (prevDep) {
-      prevDep.nextDep = nextDep;
-      link.prevDep = void 0;
-    }
-    if (nextDep) {
-      nextDep.prevDep = prevDep;
-      link.nextDep = void 0;
-    }
-  }
-  function effect(fn, options) {
-    if (fn.effect instanceof ReactiveEffect) {
-      fn = fn.effect.fn;
-    }
-    const e = new ReactiveEffect(fn);
-    if (options) {
-      extend(e, options);
-    }
-    try {
-      e.run();
-    } catch (err) {
-      e.stop();
-      throw err;
-    }
-    const runner = e.run.bind(e);
-    runner.effect = e;
-    return runner;
-  }
-  function stop(runner) {
-    runner.effect.stop();
-  }
-  let shouldTrack = true;
-  const trackStack = [];
-  function pauseTracking() {
-    trackStack.push(shouldTrack);
-    shouldTrack = false;
-  }
-  function enableTracking() {
-    trackStack.push(shouldTrack);
-    shouldTrack = true;
+      if ((link2 = next) !== void 0) {
+        next = link2.nextSub;
+        continue;
+      }
+      while (stack !== void 0) {
+        link2 = stack.value;
+        stack = stack.prev;
+        if (link2 !== void 0) {
+          next = link2.nextSub;
+          continue top;
+        }
+      }
+      break;
+    } while (true);
   }
-  function resetTracking() {
-    const last = trackStack.pop();
-    shouldTrack = last === void 0 ? true : last;
+  function startTracking(sub) {
+    sub.depsTail = void 0;
+    sub.flags = sub.flags & -57 | 4 /* RecursedCheck */;
+    return setActiveSub(sub);
   }
-  function onEffectCleanup(fn, failSilently = false) {
-    if (activeSub instanceof ReactiveEffect) {
-      activeSub.cleanup = fn;
-    } else if (!failSilently) {
+  function endTracking(sub, prevSub) {
+    if (activeSub !== sub) {
       warn(
-        `onEffectCleanup() was called when there was no active effect to associate with.`
+        "Active effect was not restored correctly - this is likely a Vue internal bug."
       );
     }
-  }
-  function cleanupEffect(e) {
-    const { cleanup } = e;
-    e.cleanup = void 0;
-    if (cleanup) {
-      const prevSub = activeSub;
-      activeSub = void 0;
-      try {
-        cleanup();
-      } finally {
-        activeSub = prevSub;
-      }
+    activeSub = prevSub;
+    const depsTail = sub.depsTail;
+    let toRemove = depsTail !== void 0 ? depsTail.nextDep : sub.deps;
+    while (toRemove !== void 0) {
+      toRemove = unlink(toRemove, sub);
+    }
+    sub.flags &= -5 /* RecursedCheck */;
+  }
+  function flush() {
+    while (notifyIndex < notifyBufferLength) {
+      const effect = notifyBuffer[notifyIndex];
+      notifyBuffer[notifyIndex++] = void 0;
+      effect.notify();
+    }
+    notifyIndex = 0;
+    notifyBufferLength = 0;
+  }
+  function checkDirty(link2, sub) {
+    let stack;
+    let checkDepth = 0;
+    top: do {
+      const dep = link2.dep;
+      const depFlags = dep.flags;
+      let dirty = false;
+      if (sub.flags & 16 /* Dirty */) {
+        dirty = true;
+      } else if ((depFlags & (1 /* Mutable */ | 16 /* Dirty */)) === (1 /* Mutable */ | 16 /* Dirty */)) {
+        if (dep.update()) {
+          const subs = dep.subs;
+          if (subs.nextSub !== void 0) {
+            shallowPropagate(subs);
+          }
+          dirty = true;
+        }
+      } else if ((depFlags & (1 /* Mutable */ | 32 /* Pending */)) === (1 /* Mutable */ | 32 /* Pending */)) {
+        if (link2.nextSub !== void 0 || link2.prevSub !== void 0) {
+          stack = { value: link2, prev: stack };
+        }
+        link2 = dep.deps;
+        sub = dep;
+        ++checkDepth;
+        continue;
+      }
+      if (!dirty && link2.nextDep !== void 0) {
+        link2 = link2.nextDep;
+        continue;
+      }
+      while (checkDepth) {
+        --checkDepth;
+        const firstSub = sub.subs;
+        const hasMultipleSubs = firstSub.nextSub !== void 0;
+        if (hasMultipleSubs) {
+          link2 = stack.value;
+          stack = stack.prev;
+        } else {
+          link2 = firstSub;
+        }
+        if (dirty) {
+          if (sub.update()) {
+            if (hasMultipleSubs) {
+              shallowPropagate(firstSub);
+            }
+            sub = link2.sub;
+            continue;
+          }
+        } else {
+          sub.flags &= -33 /* Pending */;
+        }
+        sub = link2.sub;
+        if (link2.nextDep !== void 0) {
+          link2 = link2.nextDep;
+          continue top;
+        }
+        dirty = false;
+      }
+      return dirty;
+    } while (true);
+  }
+  function shallowPropagate(link2) {
+    do {
+      const sub = link2.sub;
+      const nextSub = link2.nextSub;
+      const subFlags = sub.flags;
+      if ((subFlags & (32 /* Pending */ | 16 /* Dirty */)) === 32 /* Pending */) {
+        sub.flags = subFlags | 16 /* Dirty */;
+      }
+      link2 = nextSub;
+    } while (link2 !== void 0);
+  }
+  function isValidLink(checkLink, sub) {
+    const depsTail = sub.depsTail;
+    if (depsTail !== void 0) {
+      let link2 = sub.deps;
+      do {
+        if (link2 === checkLink) {
+          return true;
+        }
+        if (link2 === depsTail) {
+          break;
+        }
+        link2 = link2.nextDep;
+      } while (link2 !== void 0);
     }
+    return false;
   }
 
-  let globalVersion = 0;
-  class Link {
-    constructor(sub, dep) {
-      this.sub = sub;
-      this.dep = dep;
-      this.version = dep.version;
-      this.nextDep = this.prevDep = this.nextSub = this.prevSub = this.prevActiveLink = void 0;
+  const triggerEventInfos = [];
+  function onTrack(sub, debugInfo) {
+    if (sub.onTrack) {
+      sub.onTrack(
+        extend(
+          {
+            effect: sub
+          },
+          debugInfo
+        )
+      );
     }
   }
-  class Dep {
-    constructor(computed) {
-      this.computed = computed;
-      this.version = 0;
-      /**
-       * Link between this dep and the current active effect
-       */
-      this.activeLink = void 0;
-      /**
-       * Doubly linked list representing the subscribing effects (tail)
-       */
-      this.subs = void 0;
-      /**
-       * For object property deps cleanup
-       */
-      this.map = void 0;
-      this.key = void 0;
-      /**
-       * Subscriber counter
-       */
-      this.sc = 0;
-      {
-        this.subsHead = void 0;
-      }
+  function onTrigger(sub) {
+    if (sub.onTrigger) {
+      const debugInfo = triggerEventInfos[triggerEventInfos.length - 1];
+      sub.onTrigger(
+        extend(
+          {
+            effect: sub
+          },
+          debugInfo
+        )
+      );
     }
-    track(debugInfo) {
-      if (!activeSub || !shouldTrack || activeSub === this.computed) {
-        return;
+  }
+  function setupOnTrigger(target) {
+    Object.defineProperty(target.prototype, "onTrigger", {
+      get() {
+        return this._onTrigger;
+      },
+      set(val) {
+        if (val && !this._onTrigger) setupFlagsHandler(this);
+        this._onTrigger = val;
       }
-      let link = this.activeLink;
-      if (link === void 0 || link.sub !== activeSub) {
-        link = this.activeLink = new Link(activeSub, this);
-        if (!activeSub.deps) {
-          activeSub.deps = activeSub.depsTail = link;
-        } else {
-          link.prevDep = activeSub.depsTail;
-          activeSub.depsTail.nextDep = link;
-          activeSub.depsTail = link;
-        }
-        addSub(link);
-      } else if (link.version === -1) {
-        link.version = this.version;
-        if (link.nextDep) {
-          const next = link.nextDep;
-          next.prevDep = link.prevDep;
-          if (link.prevDep) {
-            link.prevDep.nextDep = next;
-          }
-          link.prevDep = activeSub.depsTail;
-          link.nextDep = void 0;
-          activeSub.depsTail.nextDep = link;
-          activeSub.depsTail = link;
-          if (activeSub.deps === link) {
-            activeSub.deps = next;
-          }
+    });
+  }
+  function setupFlagsHandler(target) {
+    target._flags = target.flags;
+    Object.defineProperty(target, "flags", {
+      get() {
+        return target._flags;
+      },
+      set(value) {
+        if (!(target._flags & (ReactiveFlags$1.Dirty | ReactiveFlags$1.Pending)) && !!(value & (ReactiveFlags$1.Dirty | ReactiveFlags$1.Pending))) {
+          onTrigger(this);
         }
+        target._flags = value;
       }
-      if (activeSub.onTrack) {
-        activeSub.onTrack(
-          extend(
-            {
-              effect: activeSub
-            },
-            debugInfo
-          )
-        );
-      }
-      return link;
+    });
+  }
+
+  class Dep {
+    constructor(map, key) {
+      this.map = map;
+      this.key = key;
+      this._subs = void 0;
+      this.subsTail = void 0;
+      this.flags = ReactiveFlags$1.None;
     }
-    trigger(debugInfo) {
-      this.version++;
-      globalVersion++;
-      this.notify(debugInfo);
+    get subs() {
+      return this._subs;
     }
-    notify(debugInfo) {
-      startBatch();
-      try {
-        if (true) {
-          for (let head = this.subsHead; head; head = head.nextSub) {
-            if (head.sub.onTrigger && !(head.sub.flags & 8)) {
-              head.sub.onTrigger(
-                extend(
-                  {
-                    effect: head.sub
-                  },
-                  debugInfo
-                )
-              );
-            }
-          }
-        }
-        for (let link = this.subs; link; link = link.prevSub) {
-          if (link.sub.notify()) {
-            ;
-            link.sub.dep.notify();
-          }
-        }
-      } finally {
-        endBatch();
+    set subs(value) {
+      this._subs = value;
+      if (value === void 0) {
+        this.map.delete(this.key);
       }
     }
   }
-  function addSub(link) {
-    link.dep.sc++;
-    if (link.sub.flags & 4) {
-      const computed = link.dep.computed;
-      if (computed && !link.dep.subs) {
-        computed.flags |= 4 | 16;
-        for (let l = computed.deps; l; l = l.nextDep) {
-          addSub(l);
-        }
-      }
-      const currentTail = link.dep.subs;
-      if (currentTail !== link) {
-        link.prevSub = currentTail;
-        if (currentTail) currentTail.nextSub = link;
-      }
-      if (link.dep.subsHead === void 0) {
-        link.dep.subsHead = link;
-      }
-      link.dep.subs = link;
-    }
-  }
   const targetMap = /* @__PURE__ */ new WeakMap();
   const ITERATE_KEY = Symbol(
     "Object iterate" 
@@ -697,36 +409,34 @@ var VueReactivity = (function (exports) {
     "Array iterate" 
   );
   function track(target, type, key) {
-    if (shouldTrack && activeSub) {
+    if (activeSub !== void 0) {
       let depsMap = targetMap.get(target);
       if (!depsMap) {
         targetMap.set(target, depsMap = /* @__PURE__ */ new Map());
       }
       let dep = depsMap.get(key);
       if (!dep) {
-        depsMap.set(key, dep = new Dep());
-        dep.map = depsMap;
-        dep.key = key;
+        depsMap.set(key, dep = new Dep(depsMap, key));
       }
       {
-        dep.track({
+        onTrack(activeSub, {
           target,
           type,
           key
         });
       }
+      link(dep, activeSub);
     }
   }
   function trigger(target, type, key, newValue, oldValue, oldTarget) {
     const depsMap = targetMap.get(target);
     if (!depsMap) {
-      globalVersion++;
       return;
     }
     const run = (dep) => {
-      if (dep) {
+      if (dep !== void 0 && dep.subs !== void 0) {
         {
-          dep.trigger({
+          triggerEventInfos.push({
             target,
             type,
             key,
@@ -735,6 +445,11 @@ var VueReactivity = (function (exports) {
             oldTarget
           });
         }
+        propagate(dep.subs);
+        shallowPropagate(dep.subs);
+        {
+          triggerEventInfos.pop();
+        }
       }
     };
     startBatch();
@@ -959,11 +674,11 @@ var VueReactivity = (function (exports) {
     return res;
   }
   function noTracking(self, method, args = []) {
-    pauseTracking();
     startBatch();
+    const prevSub = setActiveSub();
     const res = toRaw(self)[method].apply(self, args);
+    setActiveSub(prevSub);
     endBatch();
-    resetTracking();
     return res;
   }
 
@@ -1009,14 +724,18 @@ var VueReactivity = (function (exports) {
           return hasOwnProperty;
         }
       }
+      const wasRef = isRef(target);
       const res = Reflect.get(
         target,
         key,
         // if this is a proxy wrapping a ref, return methods using the raw ref
         // as receiver so that we don't have to call `toRaw` on the ref in all
         // its class methods
-        isRef(target) ? target : receiver
+        wasRef ? target : receiver
       );
+      if (wasRef && key !== "value") {
+        return res;
+      }
       if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
         return res;
       }
@@ -1468,33 +1187,47 @@ var VueReactivity = (function (exports) {
     return r ? r["__v_isRef"] === true : false;
   }
   function ref(value) {
-    return createRef(value, false);
+    return createRef(value, toReactive);
   }
   function shallowRef(value) {
-    return createRef(value, true);
+    return createRef(value);
   }
-  function createRef(rawValue, shallow) {
+  function createRef(rawValue, wrap) {
     if (isRef(rawValue)) {
       return rawValue;
     }
-    return new RefImpl(rawValue, shallow);
+    return new RefImpl(rawValue, wrap);
   }
   class RefImpl {
-    constructor(value, isShallow2) {
-      this.dep = new Dep();
-      this["__v_isRef"] = true;
-      this["__v_isShallow"] = false;
-      this._rawValue = isShallow2 ? value : toRaw(value);
-      this._value = isShallow2 ? value : toReactive(value);
-      this["__v_isShallow"] = isShallow2;
+    // TODO isolatedDeclarations "__v_isShallow"
+    constructor(value, wrap) {
+      this.subs = void 0;
+      this.subsTail = void 0;
+      this.flags = ReactiveFlags$1.Mutable;
+      /**
+       * @internal
+       */
+      this.__v_isRef = true;
+      // TODO isolatedDeclarations "__v_isRef"
+      /**
+       * @internal
+       */
+      this.__v_isShallow = false;
+      this._oldValue = this._rawValue = wrap ? toRaw(value) : value;
+      this._value = wrap ? wrap(value) : value;
+      this._wrap = wrap;
+      this["__v_isShallow"] = !wrap;
+    }
+    get dep() {
+      return this;
     }
     get value() {
-      {
-        this.dep.track({
-          target: this,
-          type: "get",
-          key: "value"
-        });
+      trackRef(this);
+      if (this.flags & ReactiveFlags$1.Dirty && this.update()) {
+        const subs = this.subs;
+        if (subs !== void 0) {
+          shallowPropagate(subs);
+        }
       }
       return this._value;
     }
@@ -1503,191 +1236,541 @@ var VueReactivity = (function (exports) {
       const useDirectValue = this["__v_isShallow"] || isShallow(newValue) || isReadonly(newValue);
       newValue = useDirectValue ? newValue : toRaw(newValue);
       if (hasChanged(newValue, oldValue)) {
+        this.flags |= ReactiveFlags$1.Dirty;
         this._rawValue = newValue;
-        this._value = useDirectValue ? newValue : toReactive(newValue);
-        {
-          this.dep.trigger({
-            target: this,
-            type: "set",
-            key: "value",
-            newValue,
-            oldValue
-          });
+        this._value = !useDirectValue && this._wrap ? this._wrap(newValue) : newValue;
+        const subs = this.subs;
+        if (subs !== void 0) {
+          {
+            triggerEventInfos.push({
+              target: this,
+              type: "set",
+              key: "value",
+              newValue,
+              oldValue
+            });
+          }
+          propagate(subs);
+          if (!batchDepth) {
+            flush();
+          }
+          {
+            triggerEventInfos.pop();
+          }
         }
       }
     }
-  }
-  function triggerRef(ref2) {
-    if (ref2.dep) {
-      {
-        ref2.dep.trigger({
-          target: ref2,
-          type: "set",
-          key: "value",
-          newValue: ref2._value
-        });
-      }
+    update() {
+      this.flags &= ~ReactiveFlags$1.Dirty;
+      return hasChanged(this._oldValue, this._oldValue = this._rawValue);
+    }
+  }
+  function triggerRef(ref2) {
+    const dep = ref2.dep;
+    if (dep !== void 0 && dep.subs !== void 0) {
+      propagate(dep.subs);
+      shallowPropagate(dep.subs);
+      if (!batchDepth) {
+        flush();
+      }
+    }
+  }
+  function trackRef(dep) {
+    if (activeSub !== void 0) {
+      {
+        onTrack(activeSub, {
+          target: dep,
+          type: "get",
+          key: "value"
+        });
+      }
+      link(dep, activeSub);
+    }
+  }
+  function unref(ref2) {
+    return isRef(ref2) ? ref2.value : ref2;
+  }
+  function toValue(source) {
+    return isFunction(source) ? source() : unref(source);
+  }
+  const shallowUnwrapHandlers = {
+    get: (target, key, receiver) => key === "__v_raw" ? target : unref(Reflect.get(target, key, receiver)),
+    set: (target, key, value, receiver) => {
+      const oldValue = target[key];
+      if (isRef(oldValue) && !isRef(value)) {
+        oldValue.value = value;
+        return true;
+      } else {
+        return Reflect.set(target, key, value, receiver);
+      }
+    }
+  };
+  function proxyRefs(objectWithRefs) {
+    return isReactive(objectWithRefs) ? objectWithRefs : new Proxy(objectWithRefs, shallowUnwrapHandlers);
+  }
+  class CustomRefImpl {
+    constructor(factory) {
+      this.subs = void 0;
+      this.subsTail = void 0;
+      this.flags = ReactiveFlags$1.None;
+      this["__v_isRef"] = true;
+      this._value = void 0;
+      const { get, set } = factory(
+        () => trackRef(this),
+        () => triggerRef(this)
+      );
+      this._get = get;
+      this._set = set;
+    }
+    get dep() {
+      return this;
+    }
+    get value() {
+      return this._value = this._get();
+    }
+    set value(newVal) {
+      this._set(newVal);
+    }
+  }
+  function customRef(factory) {
+    return new CustomRefImpl(factory);
+  }
+  function toRefs(object) {
+    const ret = isArray(object) ? new Array(object.length) : {};
+    for (const key in object) {
+      ret[key] = propertyToRef(object, key);
+    }
+    return ret;
+  }
+  class ObjectRefImpl {
+    constructor(_object, _key, _defaultValue) {
+      this._object = _object;
+      this._key = _key;
+      this._defaultValue = _defaultValue;
+      this["__v_isRef"] = true;
+      this._value = void 0;
+    }
+    get value() {
+      const val = this._object[this._key];
+      return this._value = val === void 0 ? this._defaultValue : val;
+    }
+    set value(newVal) {
+      this._object[this._key] = newVal;
+    }
+    get dep() {
+      return getDepFromReactive(toRaw(this._object), this._key);
+    }
+  }
+  class GetterRefImpl {
+    constructor(_getter) {
+      this._getter = _getter;
+      this["__v_isRef"] = true;
+      this["__v_isReadonly"] = true;
+      this._value = void 0;
+    }
+    get value() {
+      return this._value = this._getter();
+    }
+  }
+  function toRef(source, key, defaultValue) {
+    if (isRef(source)) {
+      return source;
+    } else if (isFunction(source)) {
+      return new GetterRefImpl(source);
+    } else if (isObject(source) && arguments.length > 1) {
+      return propertyToRef(source, key, defaultValue);
+    } else {
+      return ref(source);
+    }
+  }
+  function propertyToRef(source, key, defaultValue) {
+    const val = source[key];
+    return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue);
+  }
+
+  const EffectFlags = {
+    "ALLOW_RECURSE": 128,
+    "128": "ALLOW_RECURSE",
+    "PAUSED": 256,
+    "256": "PAUSED",
+    "STOP": 1024,
+    "1024": "STOP"
+  };
+  class ReactiveEffect {
+    constructor(fn) {
+      this.deps = void 0;
+      this.depsTail = void 0;
+      this.subs = void 0;
+      this.subsTail = void 0;
+      this.flags = ReactiveFlags$1.Watching | ReactiveFlags$1.Dirty;
+      /**
+       * @internal
+       */
+      this.cleanups = [];
+      /**
+       * @internal
+       */
+      this.cleanupsLength = 0;
+      if (fn !== void 0) {
+        this.fn = fn;
+      }
+      if (activeEffectScope) {
+        link(this, activeEffectScope);
+      }
+    }
+    // @ts-expect-error
+    fn() {
+    }
+    get active() {
+      return !(this.flags & 1024);
+    }
+    pause() {
+      this.flags |= 256;
+    }
+    resume() {
+      const flags = this.flags &= -257;
+      if (flags & (ReactiveFlags$1.Dirty | ReactiveFlags$1.Pending)) {
+        this.notify();
+      }
+    }
+    notify() {
+      if (!(this.flags & 256) && this.dirty) {
+        this.run();
+      }
+    }
+    run() {
+      if (!this.active) {
+        return this.fn();
+      }
+      cleanup(this);
+      const prevSub = startTracking(this);
+      try {
+        return this.fn();
+      } finally {
+        endTracking(this, prevSub);
+        const flags = this.flags;
+        if ((flags & (ReactiveFlags$1.Recursed | 128)) === (ReactiveFlags$1.Recursed | 128)) {
+          this.flags = flags & ~ReactiveFlags$1.Recursed;
+          this.notify();
+        }
+      }
+    }
+    stop() {
+      if (!this.active) {
+        return;
+      }
+      this.flags = 1024;
+      let dep = this.deps;
+      while (dep !== void 0) {
+        dep = unlink(dep, this);
+      }
+      const sub = this.subs;
+      if (sub !== void 0) {
+        unlink(sub);
+      }
+      cleanup(this);
+    }
+    get dirty() {
+      const flags = this.flags;
+      if (flags & ReactiveFlags$1.Dirty) {
+        return true;
+      }
+      if (flags & ReactiveFlags$1.Pending) {
+        if (checkDirty(this.deps, this)) {
+          this.flags = flags | ReactiveFlags$1.Dirty;
+          return true;
+        } else {
+          this.flags = flags & ~ReactiveFlags$1.Pending;
+        }
+      }
+      return false;
+    }
+  }
+  {
+    setupOnTrigger(ReactiveEffect);
+  }
+  function effect(fn, options) {
+    if (fn.effect instanceof ReactiveEffect) {
+      fn = fn.effect.fn;
+    }
+    const e = new ReactiveEffect(fn);
+    if (options) {
+      const { onStop, scheduler } = options;
+      if (onStop) {
+        options.onStop = void 0;
+        const stop2 = e.stop.bind(e);
+        e.stop = () => {
+          stop2();
+          onStop();
+        };
+      }
+      if (scheduler) {
+        options.scheduler = void 0;
+        e.notify = () => {
+          if (!(e.flags & 256)) {
+            scheduler();
+          }
+        };
+      }
+      extend(e, options);
+    }
+    try {
+      e.run();
+    } catch (err) {
+      e.stop();
+      throw err;
     }
+    const runner = e.run.bind(e);
+    runner.effect = e;
+    return runner;
   }
-  function unref(ref2) {
-    return isRef(ref2) ? ref2.value : ref2;
+  function stop(runner) {
+    runner.effect.stop();
   }
-  function toValue(source) {
-    return isFunction(source) ? source() : unref(source);
+  const resetTrackingStack = [];
+  function pauseTracking() {
+    resetTrackingStack.push(activeSub);
+    setActiveSub();
   }
-  const shallowUnwrapHandlers = {
-    get: (target, key, receiver) => key === "__v_raw" ? target : unref(Reflect.get(target, key, receiver)),
-    set: (target, key, value, receiver) => {
-      const oldValue = target[key];
-      if (isRef(oldValue) && !isRef(value)) {
-        oldValue.value = value;
-        return true;
-      } else {
-        return Reflect.set(target, key, value, receiver);
+  function enableTracking() {
+    const isPaused = activeSub === void 0;
+    if (!isPaused) {
+      resetTrackingStack.push(activeSub);
+    } else {
+      resetTrackingStack.push(void 0);
+      for (let i = resetTrackingStack.length - 1; i >= 0; i--) {
+        if (resetTrackingStack[i] !== void 0) {
+          setActiveSub(resetTrackingStack[i]);
+          break;
+        }
       }
     }
-  };
-  function proxyRefs(objectWithRefs) {
-    return isReactive(objectWithRefs) ? objectWithRefs : new Proxy(objectWithRefs, shallowUnwrapHandlers);
   }
-  class CustomRefImpl {
-    constructor(factory) {
-      this["__v_isRef"] = true;
-      this._value = void 0;
-      const dep = this.dep = new Dep();
-      const { get, set } = factory(dep.track.bind(dep), dep.trigger.bind(dep));
-      this._get = get;
-      this._set = set;
-    }
-    get value() {
-      return this._value = this._get();
+  function resetTracking() {
+    if (resetTrackingStack.length === 0) {
+      warn(
+        `resetTracking() was called when there was no active tracking to reset.`
+      );
     }
-    set value(newVal) {
-      this._set(newVal);
+    if (resetTrackingStack.length) {
+      setActiveSub(resetTrackingStack.pop());
+    } else {
+      setActiveSub();
     }
   }
-  function customRef(factory) {
-    return new CustomRefImpl(factory);
+  function cleanup(sub) {
+    const l = sub.cleanupsLength;
+    if (l) {
+      for (let i = 0; i < l; i++) {
+        sub.cleanups[i]();
+      }
+      sub.cleanupsLength = 0;
+    }
   }
-  function toRefs(object) {
-    if (!isProxy(object)) {
-      warn(`toRefs() expects a reactive object but received a plain one.`);
+  function onEffectCleanup(fn, failSilently = false) {
+    if (activeSub instanceof ReactiveEffect) {
+      activeSub.cleanups[activeSub.cleanupsLength++] = () => cleanupEffect(fn);
+    } else if (!failSilently) {
+      warn(
+        `onEffectCleanup() was called when there was no active effect to associate with.`
+      );
     }
-    const ret = isArray(object) ? new Array(object.length) : {};
-    for (const key in object) {
-      ret[key] = propertyToRef(object, key);
+  }
+  function cleanupEffect(fn) {
+    const prevSub = setActiveSub();
+    try {
+      fn();
+    } finally {
+      setActiveSub(prevSub);
     }
-    return ret;
   }
-  class ObjectRefImpl {
-    constructor(_object, _key, _defaultValue) {
-      this._object = _object;
-      this._key = _key;
-      this._defaultValue = _defaultValue;
-      this["__v_isRef"] = true;
-      this._value = void 0;
+
+  let activeEffectScope;
+  class EffectScope {
+    constructor(detached = false) {
+      this.deps = void 0;
+      this.depsTail = void 0;
+      this.subs = void 0;
+      this.subsTail = void 0;
+      this.flags = 0;
+      /**
+       * @internal
+       */
+      this.cleanups = [];
+      /**
+       * @internal
+       */
+      this.cleanupsLength = 0;
+      if (!detached && activeEffectScope) {
+        link(this, activeEffectScope);
+      }
     }
-    get value() {
-      const val = this._object[this._key];
-      return this._value = val === void 0 ? this._defaultValue : val;
+    get active() {
+      return !(this.flags & 1024);
     }
-    set value(newVal) {
-      this._object[this._key] = newVal;
+    pause() {
+      if (!(this.flags & 256)) {
+        this.flags |= 256;
+        for (let link2 = this.deps; link2 !== void 0; link2 = link2.nextDep) {
+          const dep = link2.dep;
+          if ("pause" in dep) {
+            dep.pause();
+          }
+        }
+      }
     }
-    get dep() {
-      return getDepFromReactive(toRaw(this._object), this._key);
+    /**
+     * Resumes the effect scope, including all child scopes and effects.
+     */
+    resume() {
+      const flags = this.flags;
+      if (flags & 256) {
+        this.flags = flags & -257;
+        for (let link2 = this.deps; link2 !== void 0; link2 = link2.nextDep) {
+          const dep = link2.dep;
+          if ("resume" in dep) {
+            dep.resume();
+          }
+        }
+      }
     }
-  }
-  class GetterRefImpl {
-    constructor(_getter) {
-      this._getter = _getter;
-      this["__v_isRef"] = true;
-      this["__v_isReadonly"] = true;
-      this._value = void 0;
+    run(fn) {
+      const prevSub = setActiveSub();
+      const prevScope = activeEffectScope;
+      try {
+        activeEffectScope = this;
+        return fn();
+      } finally {
+        activeEffectScope = prevScope;
+        setActiveSub(prevSub);
+      }
     }
-    get value() {
-      return this._value = this._getter();
+    stop() {
+      if (!this.active) {
+        return;
+      }
+      this.flags = 1024;
+      let dep = this.deps;
+      while (dep !== void 0) {
+        const node = dep.dep;
+        if ("stop" in node) {
+          dep = dep.nextDep;
+          node.stop();
+        } else {
+          dep = unlink(dep, this);
+        }
+      }
+      const sub = this.subs;
+      if (sub !== void 0) {
+        unlink(sub);
+      }
+      cleanup(this);
     }
   }
-  function toRef(source, key, defaultValue) {
-    if (isRef(source)) {
-      return source;
-    } else if (isFunction(source)) {
-      return new GetterRefImpl(source);
-    } else if (isObject(source) && arguments.length > 1) {
-      return propertyToRef(source, key, defaultValue);
-    } else {
-      return ref(source);
+  function effectScope(detached) {
+    return new EffectScope(detached);
+  }
+  function getCurrentScope() {
+    return activeEffectScope;
+  }
+  function setCurrentScope(scope) {
+    try {
+      return activeEffectScope;
+    } finally {
+      activeEffectScope = scope;
     }
   }
-  function propertyToRef(source, key, defaultValue) {
-    const val = source[key];
-    return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue);
+  function onScopeDispose(fn, failSilently = false) {
+    if (activeEffectScope !== void 0) {
+      activeEffectScope.cleanups[activeEffectScope.cleanupsLength++] = fn;
+    } else if (!failSilently) {
+      warn(
+        `onScopeDispose() is called when there is no active effect scope to be associated with.`
+      );
+    }
   }
 
   class ComputedRefImpl {
-    constructor(fn, setter, isSSR) {
+    constructor(fn, setter) {
       this.fn = fn;
       this.setter = setter;
       /**
        * @internal
        */
       this._value = void 0;
-      /**
-       * @internal
-       */
-      this.dep = new Dep(this);
-      /**
-       * @internal
-       */
-      this.__v_isRef = true;
-      // TODO isolatedDeclarations "__v_isReadonly"
-      // A computed is also a subscriber that tracks other deps
-      /**
-       * @internal
-       */
+      this.subs = void 0;
+      this.subsTail = void 0;
       this.deps = void 0;
-      /**
-       * @internal
-       */
       this.depsTail = void 0;
+      this.flags = ReactiveFlags$1.Mutable | ReactiveFlags$1.Dirty;
       /**
        * @internal
        */
-      this.flags = 16;
-      /**
-       * @internal
-       */
-      this.globalVersion = globalVersion - 1;
-      /**
-       * @internal
-       */
-      this.next = void 0;
-      // for backwards compat
-      this.effect = this;
+      this.__v_isRef = true;
       this["__v_isReadonly"] = !setter;
-      this.isSSR = isSSR;
+    }
+    // TODO isolatedDeclarations "__v_isReadonly"
+    // for backwards compat
+    get effect() {
+      return this;
+    }
+    // for backwards compat
+    get dep() {
+      return this;
     }
     /**
      * @internal
+     * for backwards compat
      */
-    notify() {
-      this.flags |= 16;
-      if (!(this.flags & 8) && // avoid infinite self recursion
-      activeSub !== this) {
-        batch(this, true);
+    get _dirty() {
+      const flags = this.flags;
+      if (flags & ReactiveFlags$1.Dirty) {
         return true;
       }
+      if (flags & ReactiveFlags$1.Pending) {
+        if (checkDirty(this.deps, this)) {
+          this.flags = flags | ReactiveFlags$1.Dirty;
+          return true;
+        } else {
+          this.flags = flags & ~ReactiveFlags$1.Pending;
+        }
+      }
+      return false;
+    }
+    /**
+     * @internal
+     * for backwards compat
+     */
+    set _dirty(v) {
+      if (v) {
+        this.flags |= ReactiveFlags$1.Dirty;
+      } else {
+        this.flags &= ~(ReactiveFlags$1.Dirty | ReactiveFlags$1.Pending);
+      }
     }
     get value() {
-      const link = this.dep.track({
-        target: this,
-        type: "get",
-        key: "value"
-      }) ;
-      refreshComputed(this);
-      if (link) {
-        link.version = this.dep.version;
+      const flags = this.flags;
+      if (flags & ReactiveFlags$1.Dirty || flags & ReactiveFlags$1.Pending && checkDirty(this.deps, this)) {
+        if (this.update()) {
+          const subs = this.subs;
+          if (subs !== void 0) {
+            shallowPropagate(subs);
+          }
+        }
+      } else if (flags & ReactiveFlags$1.Pending) {
+        this.flags = flags & ~ReactiveFlags$1.Pending;
+      }
+      if (activeSub !== void 0) {
+        {
+          onTrack(activeSub, {
+            target: this,
+            type: "get",
+            key: "value"
+          });
+        }
+        link(this, activeSub);
+      } else if (activeEffectScope !== void 0) {
+        link(this, activeEffectScope);
       }
       return this._value;
     }
@@ -1698,6 +1781,23 @@ var VueReactivity = (function (exports) {
         warn("Write operation failed: computed value is readonly");
       }
     }
+    update() {
+      const prevSub = startTracking(this);
+      try {
+        const oldValue = this._value;
+        const newValue = this.fn(oldValue);
+        if (hasChanged(oldValue, newValue)) {
+          this._value = newValue;
+          return true;
+        }
+        return false;
+      } finally {
+        endTracking(this, prevSub);
+      }
+    }
+  }
+  {
+    setupOnTrigger(ComputedRefImpl);
   }
   function computed(getterOrOptions, debugOptions, isSSR = false) {
     let getter;
@@ -1708,7 +1808,7 @@ var VueReactivity = (function (exports) {
       getter = getterOrOptions.get;
       setter = getterOrOptions.set;
     }
-    const cRef = new ComputedRefImpl(getter, setter, isSSR);
+    const cRef = new ComputedRefImpl(getter, setter);
     if (debugOptions && !isSSR) {
       cRef.onTrack = debugOptions.onTrack;
       cRef.onTrigger = debugOptions.onTrigger;
@@ -1745,177 +1845,155 @@ var VueReactivity = (function (exports) {
     "4": "WATCH_CLEANUP"
   };
   const INITIAL_WATCHER_VALUE = {};
-  const cleanupMap = /* @__PURE__ */ new WeakMap();
   let activeWatcher = void 0;
   function getCurrentWatcher() {
     return activeWatcher;
   }
   function onWatcherCleanup(cleanupFn, failSilently = false, owner = activeWatcher) {
     if (owner) {
-      let cleanups = cleanupMap.get(owner);
-      if (!cleanups) cleanupMap.set(owner, cleanups = []);
-      cleanups.push(cleanupFn);
+      const { call } = owner.options;
+      if (call) {
+        owner.cleanups[owner.cleanupsLength++] = () => call(cleanupFn, 4);
+      } else {
+        owner.cleanups[owner.cleanupsLength++] = cleanupFn;
+      }
     } else if (!failSilently) {
       warn(
         `onWatcherCleanup() was called when there was no active watcher to associate with.`
       );
     }
   }
-  function watch(source, cb, options = EMPTY_OBJ) {
-    const { immediate, deep, once, scheduler, augmentJob, call } = options;
-    const warnInvalidSource = (s) => {
-      (options.onWarn || warn)(
-        `Invalid watch source: `,
-        s,
-        `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
-      );
-    };
-    const reactiveGetter = (source2) => {
-      if (deep) return source2;
-      if (isShallow(source2) || deep === false || deep === 0)
-        return traverse(source2, 1);
-      return traverse(source2);
-    };
-    let effect;
-    let getter;
-    let cleanup;
-    let boundCleanup;
-    let forceTrigger = false;
-    let isMultiSource = false;
-    if (isRef(source)) {
-      getter = () => source.value;
-      forceTrigger = isShallow(source);
-    } else if (isReactive(source)) {
-      getter = () => reactiveGetter(source);
-      forceTrigger = true;
-    } else if (isArray(source)) {
-      isMultiSource = true;
-      forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
-      getter = () => source.map((s) => {
-        if (isRef(s)) {
-          return s.value;
-        } else if (isReactive(s)) {
-          return reactiveGetter(s);
-        } else if (isFunction(s)) {
-          return call ? call(s, 2) : s();
+  class WatcherEffect extends ReactiveEffect {
+    constructor(source, cb, options = EMPTY_OBJ) {
+      const { deep, once, call, onWarn } = options;
+      let getter;
+      let forceTrigger = false;
+      let isMultiSource = false;
+      if (isRef(source)) {
+        getter = () => source.value;
+        forceTrigger = isShallow(source);
+      } else if (isReactive(source)) {
+        getter = () => reactiveGetter(source, deep);
+        forceTrigger = true;
+      } else if (isArray(source)) {
+        isMultiSource = true;
+        forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
+        getter = () => source.map((s) => {
+          if (isRef(s)) {
+            return s.value;
+          } else if (isReactive(s)) {
+            return reactiveGetter(s, deep);
+          } else if (isFunction(s)) {
+            return call ? call(s, 2) : s();
+          } else {
+            warnInvalidSource(s, onWarn);
+          }
+        });
+      } else if (isFunction(source)) {
+        if (cb) {
+          getter = call ? () => call(source, 2) : source;
         } else {
-          warnInvalidSource(s);
-        }
-      });
-    } else if (isFunction(source)) {
-      if (cb) {
-        getter = call ? () => call(source, 2) : source;
-      } else {
-        getter = () => {
-          if (cleanup) {
-            pauseTracking();
+          getter = () => {
+            if (this.cleanupsLength) {
+              const prevSub = setActiveSub();
+              try {
+                cleanup(this);
+              } finally {
+                setActiveSub(prevSub);
+              }
+            }
+            const currentEffect = activeWatcher;
+            activeWatcher = this;
             try {
-              cleanup();
+              return call ? call(source, 3, [
+                this.boundCleanup
+              ]) : source(this.boundCleanup);
             } finally {
-              resetTracking();
+              activeWatcher = currentEffect;
             }
-          }
-          const currentEffect = activeWatcher;
-          activeWatcher = effect;
-          try {
-            return call ? call(source, 3, [boundCleanup]) : source(boundCleanup);
-          } finally {
-            activeWatcher = currentEffect;
-          }
+          };
+        }
+      } else {
+        getter = NOOP;
+        warnInvalidSource(source, onWarn);
+      }
+      if (cb && deep) {
+        const baseGetter = getter;
+        const depth = deep === true ? Infinity : deep;
+        getter = () => traverse(baseGetter(), depth);
+      }
+      super(getter);
+      this.cb = cb;
+      this.options = options;
+      this.boundCleanup = (fn) => onWatcherCleanup(fn, false, this);
+      this.forceTrigger = forceTrigger;
+      this.isMultiSource = isMultiSource;
+      if (once && cb) {
+        const _cb = cb;
+        cb = (...args) => {
+          _cb(...args);
+          this.stop();
         };
       }
-    } else {
-      getter = NOOP;
-      warnInvalidSource(source);
-    }
-    if (cb && deep) {
-      const baseGetter = getter;
-      const depth = deep === true ? Infinity : deep;
-      getter = () => traverse(baseGetter(), depth);
-    }
-    const scope = getCurrentScope();
-    const watchHandle = () => {
-      effect.stop();
-      if (scope && scope.active) {
-        remove(scope.effects, effect);
+      this.cb = cb;
+      this.oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
+      {
+        this.onTrack = options.onTrack;
+        this.onTrigger = options.onTrigger;
       }
-    };
-    if (once && cb) {
-      const _cb = cb;
-      cb = (...args) => {
-        _cb(...args);
-        watchHandle();
-      };
     }
-    let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
-    const job = (immediateFirstRun) => {
-      if (!(effect.flags & 1) || !effect.dirty && !immediateFirstRun) {
+    run(initialRun = false) {
+      const oldValue = this.oldValue;
+      const newValue = this.oldValue = super.run();
+      if (!this.cb) {
         return;
       }
-      if (cb) {
-        const newValue = effect.run();
-        if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue))) {
-          if (cleanup) {
-            cleanup();
-          }
-          const currentWatcher = activeWatcher;
-          activeWatcher = effect;
-          try {
-            const args = [
-              newValue,
-              // pass undefined as the old value when it's changed for the first time
-              oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
-              boundCleanup
-            ];
-            oldValue = newValue;
-            call ? call(cb, 3, args) : (
-              // @ts-expect-error
-              cb(...args)
-            );
-          } finally {
-            activeWatcher = currentWatcher;
-          }
-        }
-      } else {
-        effect.run();
+      const { immediate, deep, call } = this.options;
+      if (initialRun && !immediate) {
+        return;
       }
-    };
-    if (augmentJob) {
-      augmentJob(job);
-    }
-    effect = new ReactiveEffect(getter);
-    effect.scheduler = scheduler ? () => scheduler(job, false) : job;
-    boundCleanup = (fn) => onWatcherCleanup(fn, false, effect);
-    cleanup = effect.onStop = () => {
-      const cleanups = cleanupMap.get(effect);
-      if (cleanups) {
-        if (call) {
-          call(cleanups, 4);
-        } else {
-          for (const cleanup2 of cleanups) cleanup2();
+      if (deep || this.forceTrigger || (this.isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue))) {
+        cleanup(this);
+        const currentWatcher = activeWatcher;
+        activeWatcher = this;
+        try {
+          const args = [
+            newValue,
+            // pass undefined as the old value when it's changed for the first time
+            oldValue === INITIAL_WATCHER_VALUE ? void 0 : this.isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
+            this.boundCleanup
+          ];
+          call ? call(this.cb, 3, args) : (
+            // @ts-expect-error
+            this.cb(...args)
+          );
+        } finally {
+          activeWatcher = currentWatcher;
         }
-        cleanupMap.delete(effect);
-      }
-    };
-    {
-      effect.onTrack = options.onTrack;
-      effect.onTrigger = options.onTrigger;
-    }
-    if (cb) {
-      if (immediate) {
-        job(true);
-      } else {
-        oldValue = effect.run();
       }
-    } else if (scheduler) {
-      scheduler(job.bind(null, true), true);
-    } else {
-      effect.run();
     }
-    watchHandle.pause = effect.pause.bind(effect);
-    watchHandle.resume = effect.resume.bind(effect);
-    watchHandle.stop = watchHandle;
-    return watchHandle;
+  }
+  function reactiveGetter(source, deep) {
+    if (deep) return source;
+    if (isShallow(source) || deep === false || deep === 0)
+      return traverse(source, 1);
+    return traverse(source);
+  }
+  function warnInvalidSource(s, onWarn) {
+    (onWarn || warn)(
+      `Invalid watch source: `,
+      s,
+      `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
+    );
+  }
+  function watch(source, cb, options = EMPTY_OBJ) {
+    const effect = new WatcherEffect(source, cb, options);
+    effect.run(true);
+    const stop = effect.stop.bind(effect);
+    stop.pause = effect.pause.bind(effect);
+    stop.resume = effect.resume.bind(effect);
+    stop.stop = stop;
+    return stop;
   }
   function traverse(value, depth = Infinity, seen) {
     if (depth <= 0 || !isObject(value) || value["__v_skip"]) {
@@ -1960,6 +2038,7 @@ var VueReactivity = (function (exports) {
   exports.TrackOpTypes = TrackOpTypes;
   exports.TriggerOpTypes = TriggerOpTypes;
   exports.WatchErrorCodes = WatchErrorCodes;
+  exports.WatcherEffect = WatcherEffect;
   exports.computed = computed;
   exports.customRef = customRef;
   exports.effect = effect;
@@ -1983,6 +2062,8 @@ var VueReactivity = (function (exports) {
   exports.readonly = readonly;
   exports.ref = ref;
   exports.resetTracking = resetTracking;
+  exports.setActiveSub = setActiveSub;
+  exports.setCurrentScope = setCurrentScope;
   exports.shallowReactive = shallowReactive;
   exports.shallowReadArray = shallowReadArray;
   exports.shallowReadonly = shallowReadonly;