@vue/reactivity 3.4.25 → 3.5.0-alpha.1

package/dist/reactivity.global.js

@@ -1,5 +1,5 @@
 /**
-* @vue/reactivity v3.4.25
+* @vue/reactivity v3.5.0-alpha.1
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -13,8 +13,6 @@ var VueReactivity = (function (exports) {
     return (val) => set.has(val);
   }
 
-  const NOOP = () => {
-  };
   const extend = Object.assign;
   const hasOwnProperty$1 = Object.prototype.hasOwnProperty;
   const hasOwn = (val, key) => hasOwnProperty$1.call(val, key);
@@ -135,157 +133,296 @@ var VueReactivity = (function (exports) {
   function effectScope(detached) {
     return new EffectScope(detached);
   }
-  function recordEffectScope(effect, scope = activeEffectScope) {
-    if (scope && scope.active) {
-      scope.effects.push(effect);
-    }
-  }
   function getCurrentScope() {
     return activeEffectScope;
   }
-  function onScopeDispose(fn) {
+  function onScopeDispose(fn, failSilently = false) {
     if (activeEffectScope) {
       activeEffectScope.cleanups.push(fn);
-    } else {
+    } else if (!failSilently) {
       warn(
         `onScopeDispose() is called when there is no active effect scope to be associated with.`
       );
     }
   }
 
-  let activeEffect;
+  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",
+    "NO_BATCH": 64,
+    "64": "NO_BATCH"
+  };
   class ReactiveEffect {
-    constructor(fn, trigger, scheduler, scope) {
+    constructor(fn) {
       this.fn = fn;
-      this.trigger = trigger;
-      this.scheduler = scheduler;
-      this.active = true;
-      this.deps = [];
       /**
        * @internal
        */
-      this._dirtyLevel = 4;
+      this.deps = void 0;
       /**
        * @internal
        */
-      this._trackId = 0;
+      this.depsTail = void 0;
       /**
        * @internal
        */
-      this._runnings = 0;
+      this.flags = 1 | 4;
       /**
        * @internal
        */
-      this._shouldSchedule = false;
+      this.nextEffect = void 0;
       /**
        * @internal
        */
-      this._depsLength = 0;
-      recordEffectScope(this, scope);
-    }
-    get dirty() {
-      if (this._dirtyLevel === 2 || this._dirtyLevel === 3) {
-        this._dirtyLevel = 1;
-        pauseTracking();
-        for (let i = 0; i < this._depsLength; i++) {
-          const dep = this.deps[i];
-          if (dep.computed) {
-            triggerComputed(dep.computed);
-            if (this._dirtyLevel >= 4) {
-              break;
-            }
-          }
-        }
-        if (this._dirtyLevel === 1) {
-          this._dirtyLevel = 0;
-        }
-        resetTracking();
+      this.cleanup = void 0;
+      this.scheduler = void 0;
+      if (activeEffectScope && activeEffectScope.active) {
+        activeEffectScope.effects.push(this);
       }
-      return this._dirtyLevel >= 4;
     }
-    set dirty(v) {
-      this._dirtyLevel = v ? 4 : 0;
+    /**
+     * @internal
+     */
+    notify() {
+      if (this.flags & 2 && !(this.flags & 32)) {
+        return;
+      }
+      if (this.flags & 64) {
+        return this.trigger();
+      }
+      if (!(this.flags & 8)) {
+        this.flags |= 8;
+        this.nextEffect = batchedEffect;
+        batchedEffect = this;
+      }
     }
     run() {
-      this._dirtyLevel = 0;
-      if (!this.active) {
+      if (!(this.flags & 1)) {
         return this.fn();
       }
-      let lastShouldTrack = shouldTrack;
-      let lastEffect = activeEffect;
+      this.flags |= 2;
+      cleanupEffect(this);
+      prepareDeps(this);
+      const prevEffect = activeSub;
+      const prevShouldTrack = shouldTrack;
+      activeSub = this;
+      shouldTrack = true;
       try {
-        shouldTrack = true;
-        activeEffect = this;
-        this._runnings++;
-        preCleanupEffect(this);
         return this.fn();
       } finally {
-        postCleanupEffect(this);
-        this._runnings--;
-        activeEffect = lastEffect;
-        shouldTrack = lastShouldTrack;
+        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 &= ~2;
       }
     }
     stop() {
-      var _a;
-      if (this.active) {
-        preCleanupEffect(this);
-        postCleanupEffect(this);
-        (_a = this.onStop) == null ? void 0 : _a.call(this);
-        this.active = false;
+      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 &= ~1;
+      }
+    }
+    trigger() {
+      if (this.scheduler) {
+        this.scheduler();
+      } else {
+        this.runIfDirty();
+      }
+    }
+    /**
+     * @internal
+     */
+    runIfDirty() {
+      if (isDirty(this)) {
+        this.run();
       }
     }
+    get dirty() {
+      return isDirty(this);
+    }
   }
-  function triggerComputed(computed) {
-    return computed.value;
+  let batchDepth = 0;
+  let batchedEffect;
+  function startBatch() {
+    batchDepth++;
   }
-  function preCleanupEffect(effect2) {
-    effect2._trackId++;
-    effect2._depsLength = 0;
+  function endBatch() {
+    if (batchDepth > 1) {
+      batchDepth--;
+      return;
+    }
+    let error;
+    while (batchedEffect) {
+      let e = batchedEffect;
+      batchedEffect = void 0;
+      while (e) {
+        const next = e.nextEffect;
+        e.nextEffect = void 0;
+        e.flags &= ~8;
+        if (e.flags & 1) {
+          try {
+            e.trigger();
+          } catch (err) {
+            if (!error)
+              error = err;
+          }
+        }
+        e = next;
+      }
+    }
+    batchDepth--;
+    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;
+    for (let link = tail; link; link = link.prevDep) {
+      if (link.version === -1) {
+        if (link === tail)
+          tail = link.prevDep;
+        removeSub(link);
+        removeDep(link);
+      } else {
+        head = link;
+      }
+      link.dep.activeLink = link.prevActiveLink;
+      link.prevActiveLink = void 0;
+    }
+    sub.deps = head;
+    sub.depsTail = tail;
   }
-  function postCleanupEffect(effect2) {
-    if (effect2.deps.length > effect2._depsLength) {
-      for (let i = effect2._depsLength; i < effect2.deps.length; i++) {
-        cleanupDepEffect(effect2.deps[i], effect2);
+  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) === false || link.dep.version !== link.version) {
+        return true;
       }
-      effect2.deps.length = effect2._depsLength;
     }
+    if (sub._dirty) {
+      return true;
+    }
+    return false;
   }
-  function cleanupDepEffect(dep, effect2) {
-    const trackId = dep.get(effect2);
-    if (trackId !== void 0 && effect2._trackId !== trackId) {
-      dep.delete(effect2);
-      if (dep.size === 0) {
-        dep.cleanup();
+  function refreshComputed(computed) {
+    if (computed.flags & 2) {
+      return false;
+    }
+    if (computed.flags & 4 && !(computed.flags & 16)) {
+      return;
+    }
+    computed.flags &= ~16;
+    if (computed.globalVersion === globalVersion) {
+      return;
+    }
+    computed.globalVersion = globalVersion;
+    const dep = computed.dep;
+    computed.flags |= 2;
+    if (dep.version > 0 && !computed.isSSR && !isDirty(computed)) {
+      computed.flags &= ~2;
+      return;
+    }
+    const prevSub = activeSub;
+    const prevShouldTrack = shouldTrack;
+    activeSub = computed;
+    shouldTrack = true;
+    try {
+      prepareDeps(computed);
+      const value = computed.fn();
+      if (dep.version === 0 || hasChanged(value, computed._value)) {
+        computed._value = value;
+        dep.version++;
       }
+    } catch (err) {
+      dep.version++;
+      throw err;
+    } finally {
+      activeSub = prevSub;
+      shouldTrack = prevShouldTrack;
+      cleanupDeps(computed);
+      computed.flags &= ~2;
+    }
+  }
+  function removeSub(link) {
+    const { dep, prevSub, nextSub } = link;
+    if (prevSub) {
+      prevSub.nextSub = nextSub;
+      link.prevSub = void 0;
+    }
+    if (nextSub) {
+      nextSub.prevSub = prevSub;
+      link.nextSub = void 0;
+    }
+    if (dep.subs === link) {
+      dep.subs = prevSub;
+    }
+    if (!dep.subs && dep.computed) {
+      dep.computed.flags &= ~4;
+      for (let l = dep.computed.deps; l; l = l.nextDep) {
+        removeSub(l);
+      }
+    }
+  }
+  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 _effect = new ReactiveEffect(fn, NOOP, () => {
-      if (_effect.dirty) {
-        _effect.run();
-      }
-    });
+    const e = new ReactiveEffect(fn);
     if (options) {
-      extend(_effect, options);
-      if (options.scope)
-        recordEffectScope(_effect, options.scope);
+      extend(e, options);
     }
-    if (!options || !options.lazy) {
-      _effect.run();
+    try {
+      e.run();
+    } catch (err) {
+      e.stop();
+      throw err;
     }
-    const runner = _effect.run.bind(_effect);
-    runner.effect = _effect;
+    const runner = e.run.bind(e);
+    runner.effect = e;
     return runner;
   }
   function stop(runner) {
     runner.effect.stop();
   }
   let shouldTrack = true;
-  let pauseScheduleStack = 0;
   const trackStack = [];
   function pauseTracking() {
     trackStack.push(shouldTrack);
@@ -299,192 +436,423 @@ var VueReactivity = (function (exports) {
     const last = trackStack.pop();
     shouldTrack = last === void 0 ? true : last;
   }
-  function pauseScheduling() {
-    pauseScheduleStack++;
-  }
-  function resetScheduling() {
-    pauseScheduleStack--;
-    while (!pauseScheduleStack && queueEffectSchedulers.length) {
-      queueEffectSchedulers.shift()();
+  function onEffectCleanup(fn, failSilently = false) {
+    if (activeSub instanceof ReactiveEffect) {
+      activeSub.cleanup = fn;
+    } else if (!failSilently) {
+      warn(
+        `onEffectCleanup() was called when there was no active effect to associate with.`
+      );
     }
   }
-  function trackEffect(effect2, dep, debuggerEventExtraInfo) {
-    var _a;
-    if (dep.get(effect2) !== effect2._trackId) {
-      dep.set(effect2, effect2._trackId);
-      const oldDep = effect2.deps[effect2._depsLength];
-      if (oldDep !== dep) {
-        if (oldDep) {
-          cleanupDepEffect(oldDep, effect2);
-        }
-        effect2.deps[effect2._depsLength++] = dep;
-      } else {
-        effect2._depsLength++;
+  function cleanupEffect(e) {
+    const { cleanup } = e;
+    e.cleanup = void 0;
+    if (cleanup) {
+      const prevSub = activeSub;
+      activeSub = void 0;
+      try {
+        cleanup();
+      } finally {
+        activeSub = prevSub;
       }
+    }
+  }
+
+  let globalVersion = 0;
+  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;
       {
-        (_a = effect2.onTrack) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo));
+        this.subsHead = void 0;
       }
     }
-  }
-  const queueEffectSchedulers = [];
-  function triggerEffects(dep, dirtyLevel, debuggerEventExtraInfo) {
-    var _a;
-    pauseScheduling();
-    for (const effect2 of dep.keys()) {
-      let tracking;
-      if (effect2._dirtyLevel < dirtyLevel && (tracking != null ? tracking : tracking = dep.get(effect2) === effect2._trackId)) {
-        effect2._shouldSchedule || (effect2._shouldSchedule = effect2._dirtyLevel === 0);
-        effect2._dirtyLevel = dirtyLevel;
+    track(debugInfo) {
+      if (!activeSub || !shouldTrack) {
+        return;
       }
-      if (effect2._shouldSchedule && (tracking != null ? tracking : tracking = dep.get(effect2) === effect2._trackId)) {
-        {
-          (_a = effect2.onTrigger) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo));
+      let link = this.activeLink;
+      if (link === void 0 || link.sub !== activeSub) {
+        link = this.activeLink = {
+          dep: this,
+          sub: activeSub,
+          version: this.version,
+          nextDep: void 0,
+          prevDep: void 0,
+          nextSub: void 0,
+          prevSub: void 0,
+          prevActiveLink: void 0
+        };
+        if (!activeSub.deps) {
+          activeSub.deps = activeSub.depsTail = link;
+        } else {
+          link.prevDep = activeSub.depsTail;
+          activeSub.depsTail.nextDep = link;
+          activeSub.depsTail = link;
+        }
+        if (activeSub.flags & 4) {
+          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;
+          }
         }
-        effect2.trigger();
-        if ((!effect2._runnings || effect2.allowRecurse) && effect2._dirtyLevel !== 2) {
-          effect2._shouldSchedule = false;
-          if (effect2.scheduler) {
-            queueEffectSchedulers.push(effect2.scheduler);
+      }
+      if (activeSub.onTrack) {
+        activeSub.onTrack(
+          extend(
+            {
+              effect: activeSub
+            },
+            debugInfo
+          )
+        );
+      }
+      return link;
+    }
+    trigger(debugInfo) {
+      this.version++;
+      globalVersion++;
+      this.notify(debugInfo);
+    }
+    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) {
+          link.sub.notify();
+        }
+      } finally {
+        endBatch();
       }
     }
-    resetScheduling();
   }
-
-  const createDep = (cleanup, computed) => {
-    const dep = /* @__PURE__ */ new Map();
-    dep.cleanup = cleanup;
-    dep.computed = computed;
-    return dep;
-  };
-
+  function addSub(link) {
+    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("iterate" );
-  const MAP_KEY_ITERATE_KEY = Symbol("Map key iterate" );
+  const ITERATE_KEY = Symbol("Object iterate" );
+  const MAP_KEY_ITERATE_KEY = Symbol("Map keys iterate" );
+  const ARRAY_ITERATE_KEY = Symbol("Array iterate" );
   function track(target, type, key) {
-    if (shouldTrack && activeEffect) {
+    if (shouldTrack && activeSub) {
       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 = createDep(() => depsMap.delete(key)));
+        depsMap.set(key, dep = new Dep());
       }
-      trackEffect(
-        activeEffect,
-        dep,
-        {
+      {
+        dep.track({
           target,
           type,
           key
-        } 
-      );
+        });
+      }
     }
   }
   function trigger(target, type, key, newValue, oldValue, oldTarget) {
     const depsMap = targetMap.get(target);
     if (!depsMap) {
+      globalVersion++;
       return;
     }
     let deps = [];
     if (type === "clear") {
       deps = [...depsMap.values()];
-    } else if (key === "length" && isArray(target)) {
-      const newLength = Number(newValue);
-      depsMap.forEach((dep, key2) => {
-        if (key2 === "length" || !isSymbol(key2) && key2 >= newLength) {
-          deps.push(dep);
-        }
-      });
     } else {
-      if (key !== void 0) {
-        deps.push(depsMap.get(key));
-      }
-      switch (type) {
-        case "add":
-          if (!isArray(target)) {
-            deps.push(depsMap.get(ITERATE_KEY));
-            if (isMap(target)) {
-              deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
-            }
-          } else if (isIntegerKey(key)) {
-            deps.push(depsMap.get("length"));
+      const targetIsArray = isArray(target);
+      const isArrayIndex = targetIsArray && isIntegerKey(key);
+      if (targetIsArray && key === "length") {
+        const newLength = Number(newValue);
+        depsMap.forEach((dep, key2) => {
+          if (key2 === "length" || key2 === ARRAY_ITERATE_KEY || !isSymbol(key2) && key2 >= newLength) {
+            deps.push(dep);
           }
-          break;
-        case "delete":
-          if (!isArray(target)) {
-            deps.push(depsMap.get(ITERATE_KEY));
+        });
+      } else {
+        const push = (dep) => dep && deps.push(dep);
+        if (key !== void 0) {
+          push(depsMap.get(key));
+        }
+        if (isArrayIndex) {
+          push(depsMap.get(ARRAY_ITERATE_KEY));
+        }
+        switch (type) {
+          case "add":
+            if (!targetIsArray) {
+              push(depsMap.get(ITERATE_KEY));
+              if (isMap(target)) {
+                push(depsMap.get(MAP_KEY_ITERATE_KEY));
+              }
+            } else if (isArrayIndex) {
+              push(depsMap.get("length"));
+            }
+            break;
+          case "delete":
+            if (!targetIsArray) {
+              push(depsMap.get(ITERATE_KEY));
+              if (isMap(target)) {
+                push(depsMap.get(MAP_KEY_ITERATE_KEY));
+              }
+            }
+            break;
+          case "set":
             if (isMap(target)) {
-              deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
+              push(depsMap.get(ITERATE_KEY));
             }
-          }
-          break;
-        case "set":
-          if (isMap(target)) {
-            deps.push(depsMap.get(ITERATE_KEY));
-          }
-          break;
+            break;
+        }
       }
     }
-    pauseScheduling();
+    startBatch();
     for (const dep of deps) {
-      if (dep) {
-        triggerEffects(
-          dep,
-          4,
-          {
-            target,
-            type,
-            key,
-            newValue,
-            oldValue,
-            oldTarget
-          } 
-        );
+      {
+        dep.trigger({
+          target,
+          type,
+          key,
+          newValue,
+          oldValue,
+          oldTarget
+        });
       }
     }
-    resetScheduling();
+    endBatch();
   }
   function getDepFromReactive(object, key) {
     var _a;
     return (_a = targetMap.get(object)) == null ? void 0 : _a.get(key);
   }
 
+  function reactiveReadArray(array) {
+    const raw = toRaw(array);
+    if (raw === array)
+      return raw;
+    track(raw, "iterate", ARRAY_ITERATE_KEY);
+    return isShallow(array) ? raw : raw.map(toReactive);
+  }
+  function shallowReadArray(arr) {
+    track(arr = toRaw(arr), "iterate", ARRAY_ITERATE_KEY);
+    return arr;
+  }
+  const arrayInstrumentations = {
+    __proto__: null,
+    [Symbol.iterator]() {
+      return iterator(this, Symbol.iterator, toReactive);
+    },
+    concat(...args) {
+      return reactiveReadArray(this).concat(
+        ...args.map((x) => reactiveReadArray(x))
+      );
+    },
+    entries() {
+      return iterator(this, "entries", (value) => {
+        value[1] = toReactive(value[1]);
+        return value;
+      });
+    },
+    every(fn, thisArg) {
+      return apply(this, "every", fn, thisArg);
+    },
+    filter(fn, thisArg) {
+      const result = apply(this, "filter", fn, thisArg);
+      return isProxy(this) && !isShallow(this) ? result.map(toReactive) : result;
+    },
+    find(fn, thisArg) {
+      const result = apply(this, "find", fn, thisArg);
+      return isProxy(this) && !isShallow(this) ? toReactive(result) : result;
+    },
+    findIndex(fn, thisArg) {
+      return apply(this, "findIndex", fn, thisArg);
+    },
+    findLast(fn, thisArg) {
+      const result = apply(this, "findLast", fn, thisArg);
+      return isProxy(this) && !isShallow(this) ? toReactive(result) : result;
+    },
+    findLastIndex(fn, thisArg) {
+      return apply(this, "findLastIndex", fn, thisArg);
+    },
+    // flat, flatMap could benefit from ARRAY_ITERATE but are not straight-forward to implement
+    forEach(fn, thisArg) {
+      return apply(this, "forEach", fn, thisArg);
+    },
+    includes(...args) {
+      return searchProxy(this, "includes", args);
+    },
+    indexOf(...args) {
+      return searchProxy(this, "indexOf", args);
+    },
+    join(separator) {
+      return reactiveReadArray(this).join(separator);
+    },
+    // keys() iterator only reads `length`, no optimisation required
+    lastIndexOf(...args) {
+      return searchProxy(this, "lastIndexOf", args);
+    },
+    map(fn, thisArg) {
+      return apply(this, "map", fn, thisArg);
+    },
+    pop() {
+      return noTracking(this, "pop");
+    },
+    push(...args) {
+      return noTracking(this, "push", args);
+    },
+    reduce(fn, ...args) {
+      return reduce(this, "reduce", fn, args);
+    },
+    reduceRight(fn, ...args) {
+      return reduce(this, "reduceRight", fn, args);
+    },
+    shift() {
+      return noTracking(this, "shift");
+    },
+    // slice could use ARRAY_ITERATE but also seems to beg for range tracking
+    some(fn, thisArg) {
+      return apply(this, "some", fn, thisArg);
+    },
+    splice(...args) {
+      return noTracking(this, "splice", args);
+    },
+    toReversed() {
+      return reactiveReadArray(this).toReversed();
+    },
+    toSorted(comparer) {
+      return reactiveReadArray(this).toSorted(comparer);
+    },
+    toSpliced(...args) {
+      return reactiveReadArray(this).toSpliced(...args);
+    },
+    unshift(...args) {
+      return noTracking(this, "unshift", args);
+    },
+    values() {
+      return iterator(this, "values", toReactive);
+    }
+  };
+  function iterator(self, method, wrapValue) {
+    const arr = shallowReadArray(self);
+    const iter = arr[method]();
+    if (arr !== self && !isShallow(self)) {
+      iter._next = iter.next;
+      iter.next = () => {
+        const result = iter._next();
+        if (result.value) {
+          result.value = wrapValue(result.value);
+        }
+        return result;
+      };
+    }
+    return iter;
+  }
+  function apply(self, method, fn, thisArg) {
+    const arr = shallowReadArray(self);
+    let wrappedFn = fn;
+    if (arr !== self) {
+      if (!isShallow(self)) {
+        wrappedFn = function(item, index) {
+          return fn.call(this, toReactive(item), index, self);
+        };
+      } else if (fn.length > 2) {
+        wrappedFn = function(item, index) {
+          return fn.call(this, item, index, self);
+        };
+      }
+    }
+    return arr[method](wrappedFn, thisArg);
+  }
+  function reduce(self, method, fn, args) {
+    const arr = shallowReadArray(self);
+    let wrappedFn = fn;
+    if (arr !== self) {
+      if (!isShallow(self)) {
+        wrappedFn = function(acc, item, index) {
+          return fn.call(this, acc, toReactive(item), index, self);
+        };
+      } else if (fn.length > 3) {
+        wrappedFn = function(acc, item, index) {
+          return fn.call(this, acc, item, index, self);
+        };
+      }
+    }
+    return arr[method](wrappedFn, ...args);
+  }
+  function searchProxy(self, method, args) {
+    const arr = toRaw(self);
+    track(arr, "iterate", ARRAY_ITERATE_KEY);
+    const res = arr[method](...args);
+    if ((res === -1 || res === false) && isProxy(args[0])) {
+      args[0] = toRaw(args[0]);
+      return arr[method](...args);
+    }
+    return res;
+  }
+  function noTracking(self, method, args = []) {
+    pauseTracking();
+    startBatch();
+    const res = toRaw(self)[method].apply(self, args);
+    endBatch();
+    resetTracking();
+    return res;
+  }
+
   const isNonTrackableKeys = /* @__PURE__ */ makeMap(`__proto__,__v_isRef,__isVue`);
   const builtInSymbols = new Set(
     /* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((key) => key !== "arguments" && key !== "caller").map((key) => Symbol[key]).filter(isSymbol)
   );
-  const arrayInstrumentations = /* @__PURE__ */ createArrayInstrumentations();
-  function createArrayInstrumentations() {
-    const instrumentations = {};
-    ["includes", "indexOf", "lastIndexOf"].forEach((key) => {
-      instrumentations[key] = function(...args) {
-        const arr = toRaw(this);
-        for (let i = 0, l = this.length; i < l; i++) {
-          track(arr, "get", i + "");
-        }
-        const res = arr[key](...args);
-        if (res === -1 || res === false) {
-          return arr[key](...args.map(toRaw));
-        } else {
-          return res;
-        }
-      };
-    });
-    ["push", "pop", "shift", "unshift", "splice"].forEach((key) => {
-      instrumentations[key] = function(...args) {
-        pauseTracking();
-        pauseScheduling();
-        const res = toRaw(this)[key].apply(this, args);
-        resetScheduling();
-        resetTracking();
-        return res;
-      };
-    });
-    return instrumentations;
-  }
   function hasOwnProperty(key) {
     if (!isSymbol(key))
       key = String(key);
@@ -515,14 +883,22 @@ var VueReactivity = (function (exports) {
       }
       const targetIsArray = isArray(target);
       if (!isReadonly2) {
-        if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
-          return Reflect.get(arrayInstrumentations, key, receiver);
+        let fn;
+        if (targetIsArray && (fn = arrayInstrumentations[key])) {
+          return fn;
         }
         if (key === "hasOwnProperty") {
           return hasOwnProperty;
         }
       }
-      const res = Reflect.get(target, key, receiver);
+      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
+      );
       if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
         return res;
       }
@@ -1021,110 +1397,8 @@ var VueReactivity = (function (exports) {
   const toReactive = (value) => isObject(value) ? reactive(value) : value;
   const toReadonly = (value) => isObject(value) ? readonly(value) : value;
 
-  const COMPUTED_SIDE_EFFECT_WARN = `Computed is still dirty after getter evaluation, likely because a computed is mutating its own dependency in its getter. State mutations in computed getters should be avoided.  Check the docs for more details: https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free`;
-  class ComputedRefImpl {
-    constructor(getter, _setter, isReadonly, isSSR) {
-      this.getter = getter;
-      this._setter = _setter;
-      this.dep = void 0;
-      this.__v_isRef = true;
-      this["__v_isReadonly"] = false;
-      this.effect = new ReactiveEffect(
-        () => getter(this._value),
-        () => triggerRefValue(
-          this,
-          this.effect._dirtyLevel === 2 ? 2 : 3
-        )
-      );
-      this.effect.computed = this;
-      this.effect.active = this._cacheable = !isSSR;
-      this["__v_isReadonly"] = isReadonly;
-    }
-    get value() {
-      const self = toRaw(this);
-      if ((!self._cacheable || self.effect.dirty) && hasChanged(self._value, self._value = self.effect.run())) {
-        triggerRefValue(self, 4);
-      }
-      trackRefValue(self);
-      if (self.effect._dirtyLevel >= 2) {
-        if (this._warnRecursive) {
-          warn(COMPUTED_SIDE_EFFECT_WARN, `
-
-getter: `, this.getter);
-        }
-        triggerRefValue(self, 2);
-      }
-      return self._value;
-    }
-    set value(newValue) {
-      this._setter(newValue);
-    }
-    // #region polyfill _dirty for backward compatibility third party code for Vue <= 3.3.x
-    get _dirty() {
-      return this.effect.dirty;
-    }
-    set _dirty(v) {
-      this.effect.dirty = v;
-    }
-    // #endregion
-  }
-  function computed(getterOrOptions, debugOptions, isSSR = false) {
-    let getter;
-    let setter;
-    const onlyGetter = isFunction(getterOrOptions);
-    if (onlyGetter) {
-      getter = getterOrOptions;
-      setter = () => {
-        warn("Write operation failed: computed value is readonly");
-      } ;
-    } else {
-      getter = getterOrOptions.get;
-      setter = getterOrOptions.set;
-    }
-    const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR);
-    if (debugOptions && !isSSR) {
-      cRef.effect.onTrack = debugOptions.onTrack;
-      cRef.effect.onTrigger = debugOptions.onTrigger;
-    }
-    return cRef;
-  }
-
-  function trackRefValue(ref2) {
-    var _a;
-    if (shouldTrack && activeEffect) {
-      ref2 = toRaw(ref2);
-      trackEffect(
-        activeEffect,
-        (_a = ref2.dep) != null ? _a : ref2.dep = createDep(
-          () => ref2.dep = void 0,
-          ref2 instanceof ComputedRefImpl ? ref2 : void 0
-        ),
-        {
-          target: ref2,
-          type: "get",
-          key: "value"
-        } 
-      );
-    }
-  }
-  function triggerRefValue(ref2, dirtyLevel = 4, newVal) {
-    ref2 = toRaw(ref2);
-    const dep = ref2.dep;
-    if (dep) {
-      triggerEffects(
-        dep,
-        dirtyLevel,
-        {
-          target: ref2,
-          type: "set",
-          key: "value",
-          newValue: newVal
-        } 
-      );
-    }
-  }
   function isRef(r) {
-    return !!(r && r.__v_isRef === true);
+    return r ? r.__v_isRef === true : false;
   }
   function ref(value) {
     return createRef(value, false);
@@ -1141,27 +1415,49 @@ getter: `, this.getter);
   class RefImpl {
     constructor(value, __v_isShallow) {
       this.__v_isShallow = __v_isShallow;
-      this.dep = void 0;
+      this.dep = new Dep();
       this.__v_isRef = true;
       this._rawValue = __v_isShallow ? value : toRaw(value);
       this._value = __v_isShallow ? value : toReactive(value);
     }
     get value() {
-      trackRefValue(this);
+      {
+        this.dep.track({
+          target: this,
+          type: "get",
+          key: "value"
+        });
+      }
       return this._value;
     }
-    set value(newVal) {
-      const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
-      newVal = useDirectValue ? newVal : toRaw(newVal);
-      if (hasChanged(newVal, this._rawValue)) {
-        this._rawValue = newVal;
-        this._value = useDirectValue ? newVal : toReactive(newVal);
-        triggerRefValue(this, 4, newVal);
+    set value(newValue) {
+      const oldValue = this._rawValue;
+      const useDirectValue = this.__v_isShallow || isShallow(newValue) || isReadonly(newValue);
+      newValue = useDirectValue ? newValue : toRaw(newValue);
+      if (hasChanged(newValue, oldValue)) {
+        this._rawValue = newValue;
+        this._value = useDirectValue ? newValue : toReactive(newValue);
+        {
+          this.dep.trigger({
+            target: this,
+            type: "set",
+            key: "value",
+            newValue,
+            oldValue
+          });
+        }
       }
     }
   }
   function triggerRef(ref2) {
-    triggerRefValue(ref2, 4, ref2.value );
+    {
+      ref2.dep.trigger({
+        target: ref2,
+        type: "set",
+        key: "value",
+        newValue: ref2._value
+      });
+    }
   }
   function unref(ref2) {
     return isRef(ref2) ? ref2.value : ref2;
@@ -1186,12 +1482,9 @@ getter: `, this.getter);
   }
   class CustomRefImpl {
     constructor(factory) {
-      this.dep = void 0;
       this.__v_isRef = true;
-      const { get, set } = factory(
-        () => trackRefValue(this),
-        () => triggerRefValue(this)
-      );
+      const dep = this.dep = new Dep();
+      const { get, set } = factory(dep.track.bind(dep), dep.trigger.bind(dep));
       this._get = get;
       this._set = set;
     }
@@ -1259,7 +1552,89 @@ getter: `, this.getter);
     return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue);
   }
 
-  const deferredComputed = computed;
+  class ComputedRefImpl {
+    constructor(fn, setter, isSSR) {
+      this.fn = fn;
+      this.setter = setter;
+      /**
+       * @internal
+       */
+      this._value = void 0;
+      /**
+       * @internal
+       */
+      this.dep = new Dep(this);
+      /**
+       * @internal
+       */
+      this.__v_isRef = true;
+      // A computed is also a subscriber that tracks other deps
+      /**
+       * @internal
+       */
+      this.deps = void 0;
+      /**
+       * @internal
+       */
+      this.depsTail = void 0;
+      /**
+       * @internal
+       */
+      this.flags = 16;
+      /**
+       * @internal
+       */
+      this.globalVersion = globalVersion - 1;
+      // for backwards compat
+      this.effect = this;
+      this.__v_isReadonly = !setter;
+      this.isSSR = isSSR;
+    }
+    /**
+     * @internal
+     */
+    notify() {
+      if (activeSub !== this) {
+        this.flags |= 16;
+        this.dep.notify();
+      }
+    }
+    get value() {
+      const link = this.dep.track({
+        target: this,
+        type: "get",
+        key: "value"
+      }) ;
+      refreshComputed(this);
+      if (link) {
+        link.version = this.dep.version;
+      }
+      return this._value;
+    }
+    set value(newValue) {
+      if (this.setter) {
+        this.setter(newValue);
+      } else {
+        warn("Write operation failed: computed value is readonly");
+      }
+    }
+  }
+  function computed(getterOrOptions, debugOptions, isSSR = false) {
+    let getter;
+    let setter;
+    if (isFunction(getterOrOptions)) {
+      getter = getterOrOptions;
+    } else {
+      getter = getterOrOptions.get;
+      setter = getterOrOptions.set;
+    }
+    const cRef = new ComputedRefImpl(getter, setter, isSSR);
+    if (debugOptions && !isSSR) {
+      cRef.onTrack = debugOptions.onTrack;
+      cRef.onTrigger = debugOptions.onTrigger;
+    }
+    return cRef;
+  }
 
   const TrackOpTypes = {
     "GET": "get",
@@ -1280,15 +1655,17 @@ getter: `, this.getter);
     "RAW": "__v_raw"
   };
 
+  exports.ARRAY_ITERATE_KEY = ARRAY_ITERATE_KEY;
+  exports.EffectFlags = EffectFlags;
   exports.EffectScope = EffectScope;
   exports.ITERATE_KEY = ITERATE_KEY;
+  exports.MAP_KEY_ITERATE_KEY = MAP_KEY_ITERATE_KEY;
   exports.ReactiveEffect = ReactiveEffect;
   exports.ReactiveFlags = ReactiveFlags;
   exports.TrackOpTypes = TrackOpTypes;
   exports.TriggerOpTypes = TriggerOpTypes;
   exports.computed = computed;
   exports.customRef = customRef;
-  exports.deferredComputed = deferredComputed;
   exports.effect = effect;
   exports.effectScope = effectScope;
   exports.enableTracking = enableTracking;
@@ -1299,20 +1676,23 @@ getter: `, this.getter);
   exports.isRef = isRef;
   exports.isShallow = isShallow;
   exports.markRaw = markRaw;
+  exports.onEffectCleanup = onEffectCleanup;
   exports.onScopeDispose = onScopeDispose;
-  exports.pauseScheduling = pauseScheduling;
   exports.pauseTracking = pauseTracking;
   exports.proxyRefs = proxyRefs;
   exports.reactive = reactive;
+  exports.reactiveReadArray = reactiveReadArray;
   exports.readonly = readonly;
   exports.ref = ref;
-  exports.resetScheduling = resetScheduling;
   exports.resetTracking = resetTracking;
   exports.shallowReactive = shallowReactive;
+  exports.shallowReadArray = shallowReadArray;
   exports.shallowReadonly = shallowReadonly;
   exports.shallowRef = shallowRef;
   exports.stop = stop;
   exports.toRaw = toRaw;
+  exports.toReactive = toReactive;
+  exports.toReadonly = toReadonly;
   exports.toRef = toRef;
   exports.toRefs = toRefs;
   exports.toValue = toValue;