@vue/runtime-dom 3.1.0-beta.5 → 3.1.1

package/dist/runtime-dom.global.js

@@ -334,7 +334,7 @@ var VueRuntimeDOM = (function (exports) {
   function createReactiveEffect(fn, options) {
       const effect = function reactiveEffect() {
           if (!effect.active) {
-              return options.scheduler ? undefined : fn();
+              return fn();
           }
           if (!effectStack.includes(effect)) {
               cleanup(effect);
@@ -1560,7 +1560,7 @@ var VueRuntimeDOM = (function (exports) {
       try {
           for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
               const job = queue[flushIndex];
-              if (job) {
+              if (job && job.active !== false) {
                   if (true && checkRecursiveUpdates(seen, job)) {
                       continue;
                   }
@@ -1742,7 +1742,7 @@ var VueRuntimeDOM = (function (exports) {
       exports.devtools.emit("app:init" /* APP_INIT */, app, version, {
           Fragment,
           Text,
-          Comment,
+          Comment: Comment$1,
           Static
       });
   }
@@ -2072,7 +2072,7 @@ var VueRuntimeDOM = (function (exports) {
       warnCount[dupKey] = 0;
       const { message, link } = deprecationData[key];
       warn(`(deprecation ${key}) ${typeof message === 'function' ? message(...args) : message}${link ? `\n  Details: ${link}` : ``}`);
-      if (!isCompatEnabled(key, instance)) {
+      if (!isCompatEnabled(key, instance, true)) {
           console.error(`^ The above deprecation's compat behavior is disabled and will likely ` +
               `lead to runtime errors.`);
       }
@@ -2179,8 +2179,10 @@ var VueRuntimeDOM = (function (exports) {
       }
   }
   function normalizeEmitsOptions(comp, appContext, asMixin = false) {
-      if (!appContext.deopt && comp.__emits !== undefined) {
-          return comp.__emits;
+      const cache = appContext.emitsCache;
+      const cached = cache.get(comp);
+      if (cached !== undefined) {
+          return cached;
       }
       const raw = comp.emits;
       let normalized = {};
@@ -2205,7 +2207,8 @@ var VueRuntimeDOM = (function (exports) {
           }
       }
       if (!raw && !hasExtends) {
-          return (comp.__emits = null);
+          cache.set(comp, null);
+          return null;
       }
       if (isArray(raw)) {
           raw.forEach(key => (normalized[key] = null));
@@ -2213,7 +2216,8 @@ var VueRuntimeDOM = (function (exports) {
       else {
           extend(normalized, raw);
       }
-      return (comp.__emits = normalized);
+      cache.set(comp, normalized);
+      return normalized;
   }
   // Check if an incoming prop key is a declared emit event listener.
   // e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are
@@ -2323,7 +2327,7 @@ var VueRuntimeDOM = (function (exports) {
       accessedAttrs = true;
   }
   function renderComponentRoot(instance) {
-      const { type: Component, vnode, proxy, withProxy, props, propsOptions: [propsOptions], slots, attrs, emit, render, renderCache, data, setupState, ctx } = instance;
+      const { type: Component, vnode, proxy, withProxy, props, propsOptions: [propsOptions], slots, attrs, emit, render, renderCache, data, setupState, ctx, inheritAttrs } = instance;
       let result;
       const prev = setCurrentRenderingInstance(instance);
       {
@@ -2372,7 +2376,7 @@ var VueRuntimeDOM = (function (exports) {
               ;
               [root, setRoot] = getChildRoot(result);
           }
-          if (fallthroughAttrs && Component.inheritAttrs !== false) {
+          if (fallthroughAttrs && inheritAttrs !== false) {
               const keys = Object.keys(fallthroughAttrs);
               const { shapeFlag } = root;
               if (keys.length) {
@@ -2387,7 +2391,7 @@ var VueRuntimeDOM = (function (exports) {
                       }
                       root = cloneVNode(root, fallthroughAttrs);
                   }
-                  else if (true && !accessedAttrs && root.type !== Comment) {
+                  else if (true && !accessedAttrs && root.type !== Comment$1) {
                       const allAttrs = Object.keys(attrs);
                       const eventAttrs = [];
                       const extraAttrs = [];
@@ -2453,7 +2457,7 @@ var VueRuntimeDOM = (function (exports) {
       catch (err) {
           blockStack.length = 0;
           handleError(err, instance, 1 /* RENDER_FUNCTION */);
-          result = createVNode(Comment);
+          result = createVNode(Comment$1);
       }
       setCurrentRenderingInstance(prev);
       return result;
@@ -2492,7 +2496,7 @@ var VueRuntimeDOM = (function (exports) {
           const child = children[i];
           if (isVNode(child)) {
               // ignore user comment
-              if (child.type !== Comment || child.children === 'v-if') {
+              if (child.type !== Comment$1 || child.children === 'v-if') {
                   if (singleRoot) {
                       // has more than 1 non-comment child, return now
                       return;
@@ -2529,7 +2533,7 @@ var VueRuntimeDOM = (function (exports) {
   const isElementRoot = (vnode) => {
       return (vnode.shapeFlag & 6 /* COMPONENT */ ||
           vnode.shapeFlag & 1 /* ELEMENT */ ||
-          vnode.type === Comment // potential v-if branch switch
+          vnode.type === Comment$1 // potential v-if branch switch
       );
   };
   function shouldUpdateComponent(prevVNode, nextVNode, optimized) {
@@ -2635,7 +2639,8 @@ var VueRuntimeDOM = (function (exports) {
           }
       },
       hydrate: hydrateSuspense,
-      create: createSuspenseBoundary
+      create: createSuspenseBoundary,
+      normalize: normalizeSuspenseChildren
   };
   // Force-casted public typing for h and TSX props inference
   const Suspense = (SuspenseImpl
@@ -2980,24 +2985,29 @@ var VueRuntimeDOM = (function (exports) {
   }
   function normalizeSuspenseChildren(vnode) {
       const { shapeFlag, children } = vnode;
-      let content;
-      let fallback;
-      if (shapeFlag & 32 /* SLOTS_CHILDREN */) {
-          content = normalizeSuspenseSlot(children.default);
-          fallback = normalizeSuspenseSlot(children.fallback);
-      }
-      else {
-          content = normalizeSuspenseSlot(children);
-          fallback = normalizeVNode(null);
-      }
-      return {
-          content,
-          fallback
-      };
+      const isSlotChildren = shapeFlag & 32 /* SLOTS_CHILDREN */;
+      vnode.ssContent = normalizeSuspenseSlot(isSlotChildren ? children.default : children);
+      vnode.ssFallback = isSlotChildren
+          ? normalizeSuspenseSlot(children.fallback)
+          : createVNode(Comment);
   }
   function normalizeSuspenseSlot(s) {
+      let block;
       if (isFunction(s)) {
+          const isCompiledSlot = s._c;
+          if (isCompiledSlot) {
+              // disableTracking: false
+              // allow block tracking for compiled slots
+              // (see ./componentRenderContext.ts)
+              s._d = false;
+              openBlock();
+          }
           s = s();
+          if (isCompiledSlot) {
+              s._d = true;
+              block = currentBlock;
+              closeBlock();
+          }
       }
       if (isArray(s)) {
           const singleChild = filterSingleRoot(s);
@@ -3006,7 +3016,11 @@ var VueRuntimeDOM = (function (exports) {
           }
           s = singleChild;
       }
-      return normalizeVNode(s);
+      s = normalizeVNode(s);
+      if (block) {
+          s.dynamicChildren = block.filter(c => c !== s);
+      }
+      return s;
   }
   function queueEffectWithSuspense(fn, suspense) {
       if (suspense && suspense.pendingBranch) {
@@ -3211,7 +3225,7 @@ var VueRuntimeDOM = (function (exports) {
       job.allowRecurse = !!cb;
       let scheduler;
       if (flush === 'sync') {
-          scheduler = job;
+          scheduler = job; // the scheduler function gets called directly
       }
       else if (flush === 'post') {
           scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
@@ -3287,7 +3301,9 @@ var VueRuntimeDOM = (function (exports) {
       };
   }
   function traverse(value, seen = new Set()) {
-      if (!isObject(value) || seen.has(value)) {
+      if (!isObject(value) ||
+          seen.has(value) ||
+          value["__v_skip" /* SKIP */]) {
           return value;
       }
       seen.add(value);
@@ -3401,7 +3417,7 @@ var VueRuntimeDOM = (function (exports) {
               }
               // handle mode
               if (oldInnerChild &&
-                  oldInnerChild.type !== Comment &&
+                  oldInnerChild.type !== Comment$1 &&
                   (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) {
                   const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance);
                   // update old tree's hooks in case of dynamic transition
@@ -3416,7 +3432,7 @@ var VueRuntimeDOM = (function (exports) {
                       };
                       return emptyPlaceholder(child);
                   }
-                  else if (mode === 'in-out' && innerChild.type !== Comment) {
+                  else if (mode === 'in-out' && innerChild.type !== Comment$1) {
                       leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {
                           const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild);
                           leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;
@@ -3608,7 +3624,7 @@ var VueRuntimeDOM = (function (exports) {
               ret = ret.concat(getTransitionRawChildren(child.children, keepComment));
           }
           // comment placeholders should be skipped, e.g. v-if
-          else if (keepComment || child.type !== Comment) {
+          else if (keepComment || child.type !== Comment$1) {
               ret.push(child);
           }
       }
@@ -4106,75 +4122,6 @@ var VueRuntimeDOM = (function (exports) {
       injectHook("ec" /* ERROR_CAPTURED */, hook, target);
   }
 
-  const COMPONENTS = 'components';
-  const DIRECTIVES = 'directives';
-  /**
-   * @private
-   */
-  function resolveComponent(name, maybeSelfReference) {
-      return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name;
-  }
-  const NULL_DYNAMIC_COMPONENT = Symbol();
-  /**
-   * @private
-   */
-  function resolveDynamicComponent(component) {
-      if (isString(component)) {
-          return resolveAsset(COMPONENTS, component, false) || component;
-      }
-      else {
-          // invalid types will fallthrough to createVNode and raise warning
-          return (component || NULL_DYNAMIC_COMPONENT);
-      }
-  }
-  /**
-   * @private
-   */
-  function resolveDirective(name) {
-      return resolveAsset(DIRECTIVES, name);
-  }
-  // implementation
-  function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) {
-      const instance = currentRenderingInstance || currentInstance;
-      if (instance) {
-          const Component = instance.type;
-          // explicit self name has highest priority
-          if (type === COMPONENTS) {
-              const selfName = getComponentName(Component);
-              if (selfName &&
-                  (selfName === name ||
-                      selfName === camelize(name) ||
-                      selfName === capitalize(camelize(name)))) {
-                  return Component;
-              }
-          }
-          const res = 
-          // local registration
-          // check instance[type] first for components with mixin or extends.
-          resolve(instance[type] || Component[type], name) ||
-              // global registration
-              resolve(instance.appContext[type], name);
-          if (!res && maybeSelfReference) {
-              // fallback to implicit self-reference
-              return Component;
-          }
-          if (warnMissing && !res) {
-              warn(`Failed to resolve ${type.slice(0, -1)}: ${name}`);
-          }
-          return res;
-      }
-      else {
-          warn(`resolve${capitalize(type.slice(0, -1))} ` +
-              `can only be used in render() or setup().`);
-      }
-  }
-  function resolve(registry, name) {
-      return (registry &&
-          (registry[name] ||
-              registry[camelize(name)] ||
-              registry[capitalize(camelize(name))]));
-  }
-
   function createDuplicateChecker() {
       const cache = Object.create(null);
       return (type, key) => {
@@ -4187,38 +4134,26 @@ var VueRuntimeDOM = (function (exports) {
       };
   }
   let shouldCacheAccess = true;
-  function applyOptions(instance, options, deferredData = [], deferredWatch = [], deferredProvide = [], asMixin = false) {
+  function applyOptions(instance) {
+      const options = resolveMergedOptions(instance);
+      const publicThis = instance.proxy;
+      const ctx = instance.ctx;
+      // do not cache property access on public proxy during state initialization
+      shouldCacheAccess = false;
+      // call beforeCreate first before accessing other options since
+      // the hook may mutate resolved options (#2791)
+      if (options.beforeCreate) {
+          callHook(options.beforeCreate, instance, "bc" /* BEFORE_CREATE */);
+      }
       const { 
-      // composition
-      mixins, extends: extendsOptions, 
       // state
       data: dataOptions, computed: computedOptions, methods, watch: watchOptions, provide: provideOptions, inject: injectOptions, 
       // lifecycle
-      beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, beforeUnmount, destroyed, unmounted, render, renderTracked, renderTriggered, errorCaptured, serverPrefetch, 
+      created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, beforeUnmount, destroyed, unmounted, render, renderTracked, renderTriggered, errorCaptured, serverPrefetch, 
       // public API
-      expose } = options;
-      const publicThis = instance.proxy;
-      const ctx = instance.ctx;
-      const globalMixins = instance.appContext.mixins;
-      if (asMixin && render && instance.render === NOOP) {
-          instance.render = render;
-      }
-      // applyOptions is called non-as-mixin once per instance
-      if (!asMixin) {
-          shouldCacheAccess = false;
-          callSyncHook('beforeCreate', "bc" /* BEFORE_CREATE */, options, instance, globalMixins);
-          shouldCacheAccess = true;
-          // global mixins are applied first
-          applyMixins(instance, globalMixins, deferredData, deferredWatch, deferredProvide);
-      }
-      // extending a base component...
-      if (extendsOptions) {
-          applyOptions(instance, extendsOptions, deferredData, deferredWatch, deferredProvide, true);
-      }
-      // local mixins
-      if (mixins) {
-          applyMixins(instance, mixins, deferredData, deferredWatch, deferredProvide);
-      }
+      expose, inheritAttrs, 
+      // assets
+      components, directives, filters } = options;
       const checkDuplicateProperties = createDuplicateChecker() ;
       {
           const [propsOptions] = instance.propsOptions;
@@ -4262,33 +4197,40 @@ var VueRuntimeDOM = (function (exports) {
               }
           }
       }
-      if (!asMixin) {
-          if (deferredData.length) {
-              deferredData.forEach(dataFn => resolveData(instance, dataFn, publicThis));
+      if (dataOptions) {
+          if (!isFunction(dataOptions)) {
+              warn(`The data option must be a function. ` +
+                  `Plain object usage is no longer supported.`);
           }
-          if (dataOptions) {
-              // @ts-ignore dataOptions is not fully type safe
-              resolveData(instance, dataOptions, publicThis);
+          const data = dataOptions.call(publicThis, publicThis);
+          if (isPromise(data)) {
+              warn(`data() returned a Promise - note data() cannot be async; If you ` +
+                  `intend to perform data fetching before component renders, use ` +
+                  `async setup() + <Suspense>.`);
           }
-          {
-              const rawData = toRaw(instance.data);
-              for (const key in rawData) {
-                  checkDuplicateProperties("Data" /* DATA */, key);
-                  // expose data on ctx during dev
-                  if (key[0] !== '$' && key[0] !== '_') {
-                      Object.defineProperty(ctx, key, {
-                          configurable: true,
-                          enumerable: true,
-                          get: () => rawData[key],
-                          set: NOOP
-                      });
+          if (!isObject(data)) {
+              warn(`data() should return an object.`);
+          }
+          else {
+              instance.data = reactive(data);
+              {
+                  for (const key in data) {
+                      checkDuplicateProperties("Data" /* DATA */, key);
+                      // expose data on ctx during dev
+                      if (key[0] !== '$' && key[0] !== '_') {
+                          Object.defineProperty(ctx, key, {
+                              configurable: true,
+                              enumerable: true,
+                              get: () => data[key],
+                              set: NOOP
+                          });
+                      }
                   }
               }
           }
       }
-      else if (dataOptions) {
-          deferredData.push(dataOptions);
-      }
+      // state initialization complete at this point - start caching access
+      shouldCacheAccess = true;
       if (computedOptions) {
           for (const key in computedOptions) {
               const opt = computedOptions[key];
@@ -4322,42 +4264,26 @@ var VueRuntimeDOM = (function (exports) {
           }
       }
       if (watchOptions) {
-          deferredWatch.push(watchOptions);
-      }
-      if (!asMixin && deferredWatch.length) {
-          deferredWatch.forEach(watchOptions => {
-              for (const key in watchOptions) {
-                  createWatcher(watchOptions[key], ctx, publicThis, key);
-              }
-          });
+          for (const key in watchOptions) {
+              createWatcher(watchOptions[key], ctx, publicThis, key);
+          }
       }
       if (provideOptions) {
-          deferredProvide.push(provideOptions);
-      }
-      if (!asMixin && deferredProvide.length) {
-          deferredProvide.forEach(provideOptions => {
-              const provides = isFunction(provideOptions)
-                  ? provideOptions.call(publicThis)
-                  : provideOptions;
-              Reflect.ownKeys(provides).forEach(key => {
-                  provide(key, provides[key]);
-              });
+          const provides = isFunction(provideOptions)
+              ? provideOptions.call(publicThis)
+              : provideOptions;
+          Reflect.ownKeys(provides).forEach(key => {
+              provide(key, provides[key]);
           });
       }
-      // asset options.
-      // To reduce memory usage, only components with mixins or extends will have
-      // resolved asset registry attached to instance.
-      if (asMixin) {
-          resolveInstanceAssets(instance, options, COMPONENTS);
-          resolveInstanceAssets(instance, options, DIRECTIVES);
-      }
-      // lifecycle options
-      if (!asMixin) {
-          callSyncHook('created', "c" /* CREATED */, options, instance, globalMixins);
+      if (created) {
+          callHook(created, instance, "c" /* CREATED */);
       }
       function registerLifecycleHook(register, hook) {
-          // Array lifecycle hooks are only present in the compat build
-          if (hook) {
+          if (isArray(hook)) {
+              hook.forEach(_hook => register(_hook.bind(publicThis)));
+          }
+          else if (hook) {
               register(hook.bind(publicThis));
           }
       }
@@ -4374,105 +4300,57 @@ var VueRuntimeDOM = (function (exports) {
       registerLifecycleHook(onUnmounted, unmounted);
       registerLifecycleHook(onServerPrefetch, serverPrefetch);
       if (isArray(expose)) {
-          if (!asMixin) {
-              if (expose.length) {
-                  const exposed = instance.exposed || (instance.exposed = proxyRefs({}));
-                  expose.forEach(key => {
-                      exposed[key] = toRef(publicThis, key);
-                  });
-              }
-              else if (!instance.exposed) {
-                  instance.exposed = EMPTY_OBJ;
-              }
+          if (expose.length) {
+              const exposed = instance.exposed || (instance.exposed = proxyRefs({}));
+              expose.forEach(key => {
+                  exposed[key] = toRef(publicThis, key);
+              });
           }
-          else {
-              warn(`The \`expose\` option is ignored when used in mixins.`);
+          else if (!instance.exposed) {
+              instance.exposed = EMPTY_OBJ;
           }
       }
-  }
-  function resolveInstanceAssets(instance, mixin, type) {
-      if (mixin[type]) {
-          extend(instance[type] ||
-              (instance[type] = extend({}, instance.type[type])), mixin[type]);
+      // options that are handled when creating the instance but also need to be
+      // applied from mixins
+      if (render && instance.render === NOOP) {
+          instance.render = render;
+      }
+      if (inheritAttrs != null) {
+          instance.inheritAttrs = inheritAttrs;
       }
+      // asset options.
+      if (components)
+          instance.components = components;
+      if (directives)
+          instance.directives = directives;
   }
   function resolveInjections(injectOptions, ctx, checkDuplicateProperties = NOOP) {
       if (isArray(injectOptions)) {
-          for (let i = 0; i < injectOptions.length; i++) {
-              const key = injectOptions[i];
-              ctx[key] = inject(key);
-              {
-                  checkDuplicateProperties("Inject" /* INJECT */, key);
-              }
-          }
+          injectOptions = normalizeInject(injectOptions);
       }
-      else {
-          for (const key in injectOptions) {
-              const opt = injectOptions[key];
-              if (isObject(opt)) {
+      for (const key in injectOptions) {
+          const opt = injectOptions[key];
+          if (isObject(opt)) {
+              if ('default' in opt) {
                   ctx[key] = inject(opt.from || key, opt.default, true /* treat default function as factory */);
               }
               else {
-                  ctx[key] = inject(opt);
-              }
-              {
-                  checkDuplicateProperties("Inject" /* INJECT */, key);
+                  ctx[key] = inject(opt.from || key);
               }
           }
-      }
-  }
-  function callSyncHook(name, type, options, instance, globalMixins) {
-      for (let i = 0; i < globalMixins.length; i++) {
-          callHookWithMixinAndExtends(name, type, globalMixins[i], instance);
-      }
-      callHookWithMixinAndExtends(name, type, options, instance);
-  }
-  function callHookWithMixinAndExtends(name, type, options, instance) {
-      const { extends: base, mixins } = options;
-      const selfHook = options[name];
-      if (base) {
-          callHookWithMixinAndExtends(name, type, base, instance);
-      }
-      if (mixins) {
-          for (let i = 0; i < mixins.length; i++) {
-              callHookWithMixinAndExtends(name, type, mixins[i], instance);
+          else {
+              ctx[key] = inject(opt);
           }
-      }
-      if (selfHook) {
-          callWithAsyncErrorHandling(selfHook.bind(instance.proxy), instance, type);
-      }
-  }
-  function applyMixins(instance, mixins, deferredData, deferredWatch, deferredProvide) {
-      for (let i = 0; i < mixins.length; i++) {
-          applyOptions(instance, mixins[i], deferredData, deferredWatch, deferredProvide, true);
-      }
-  }
-  function resolveData(instance, dataFn, publicThis) {
-      if (!isFunction(dataFn)) {
-          warn(`The data option must be a function. ` +
-              `Plain object usage is no longer supported.`);
-      }
-      shouldCacheAccess = false;
-      const data = dataFn.call(publicThis, publicThis);
-      shouldCacheAccess = true;
-      if (isPromise(data)) {
-          warn(`data() returned a Promise - note data() cannot be async; If you ` +
-              `intend to perform data fetching before component renders, use ` +
-              `async setup() + <Suspense>.`);
-      }
-      if (!isObject(data)) {
-          warn(`data() should return an object.`);
-      }
-      else if (instance.data === EMPTY_OBJ) {
-          instance.data = reactive(data);
-      }
-      else {
-          // existing data: this is a mixin or extends.
           {
-              extend(instance.data, data);
+              checkDuplicateProperties("Inject" /* INJECT */, key);
           }
       }
   }
+  function callHook(hook, instance, type) {
+      callWithAsyncErrorHandling(isArray(hook)
+          ? hook.map(h => h.bind(instance.proxy))
+          : hook.bind(instance.proxy), instance, type);
+  }
   function createWatcher(raw, ctx, publicThis, key) {
       const getter = key.includes('.')
           ? createPathGetter(publicThis, key)
@@ -4509,33 +4387,115 @@ var VueRuntimeDOM = (function (exports) {
           warn(`Invalid watch option: "${key}"`, raw);
       }
   }
+  /**
+   * Resolve merged options and cache it on the component.
+   * This is done only once per-component since the merging does not involve
+   * instances.
+   */
   function resolveMergedOptions(instance) {
-      const raw = instance.type;
-      const { __merged, mixins, extends: extendsOptions } = raw;
-      if (__merged)
-          return __merged;
-      const globalMixins = instance.appContext.mixins;
-      if (!globalMixins.length && !mixins && !extendsOptions)
-          return raw;
-      const options = {};
-      globalMixins.forEach(m => mergeOptions(options, m, instance));
-      mergeOptions(options, raw, instance);
-      return (raw.__merged = options);
-  }
-  function mergeOptions(to, from, instance, strats = instance && instance.appContext.config.optionMergeStrategies) {
+      const base = instance.type;
+      const { mixins, extends: extendsOptions } = base;
+      const { mixins: globalMixins, optionsCache: cache, config: { optionMergeStrategies } } = instance.appContext;
+      const cached = cache.get(base);
+      let resolved;
+      if (cached) {
+          resolved = cached;
+      }
+      else if (!globalMixins.length && !mixins && !extendsOptions) {
+          {
+              resolved = base;
+          }
+      }
+      else {
+          resolved = {};
+          if (globalMixins.length) {
+              globalMixins.forEach(m => mergeOptions(resolved, m, optionMergeStrategies, true));
+          }
+          mergeOptions(resolved, base, optionMergeStrategies);
+      }
+      cache.set(base, resolved);
+      return resolved;
+  }
+  function mergeOptions(to, from, strats, asMixin = false) {
       const { mixins, extends: extendsOptions } = from;
-      extendsOptions && mergeOptions(to, extendsOptions, instance, strats);
-      mixins &&
-          mixins.forEach((m) => mergeOptions(to, m, instance, strats));
+      if (extendsOptions) {
+          mergeOptions(to, extendsOptions, strats, true);
+      }
+      if (mixins) {
+          mixins.forEach((m) => mergeOptions(to, m, strats, true));
+      }
       for (const key in from) {
-          if (strats && hasOwn(strats, key)) {
-              to[key] = strats[key](to[key], from[key], instance && instance.proxy, key);
+          if (asMixin && key === 'expose') {
+              warn(`"expose" option is ignored when declared in mixins or extends. ` +
+                      `It should only be declared in the base component itself.`);
           }
           else {
-              to[key] = from[key];
+              const strat = internalOptionMergeStrats[key] || (strats && strats[key]);
+              to[key] = strat ? strat(to[key], from[key]) : from[key];
           }
       }
       return to;
+  }
+  const internalOptionMergeStrats = {
+      data: mergeDataFn,
+      props: mergeObjectOptions,
+      emits: mergeObjectOptions,
+      // objects
+      methods: mergeObjectOptions,
+      computed: mergeObjectOptions,
+      // lifecycle
+      beforeCreate: mergeHook,
+      created: mergeHook,
+      beforeMount: mergeHook,
+      mounted: mergeHook,
+      beforeUpdate: mergeHook,
+      updated: mergeHook,
+      beforeDestroy: mergeHook,
+      destroyed: mergeHook,
+      activated: mergeHook,
+      deactivated: mergeHook,
+      errorCaptured: mergeHook,
+      serverPrefetch: mergeHook,
+      // assets
+      components: mergeObjectOptions,
+      directives: mergeObjectOptions,
+      // watch has special merge behavior in v2, but isn't actually needed in v3.
+      // since we are only exposing these for compat and nobody should be relying
+      // on the watch-specific behavior, just expose the object merge strat.
+      watch: mergeObjectOptions,
+      // provide / inject
+      provide: mergeDataFn,
+      inject: mergeInject
+  };
+  function mergeDataFn(to, from) {
+      if (!from) {
+          return to;
+      }
+      if (!to) {
+          return from;
+      }
+      return function mergedDataFn() {
+          return (extend)(isFunction(to) ? to.call(this, this) : to, isFunction(from) ? from.call(this, this) : from);
+      };
+  }
+  function mergeInject(to, from) {
+      return mergeObjectOptions(normalizeInject(to), normalizeInject(from));
+  }
+  function normalizeInject(raw) {
+      if (isArray(raw)) {
+          const res = {};
+          for (let i = 0; i < raw.length; i++) {
+              res[raw[i]] = raw[i];
+          }
+          return res;
+      }
+      return raw;
+  }
+  function mergeHook(to, from) {
+      return to ? [...new Set([].concat(to, from))] : from;
+  }
+  function mergeObjectOptions(to, from) {
+      return to ? extend(extend(Object.create(null), to), from) : from;
   }
 
   function initProps(instance, rawProps, isStateful, // result of bitwise flag comparison
@@ -4739,8 +4699,10 @@ var VueRuntimeDOM = (function (exports) {
       return value;
   }
   function normalizePropsOptions(comp, appContext, asMixin = false) {
-      if (!appContext.deopt && comp.__props) {
-          return comp.__props;
+      const cache = appContext.propsCache;
+      const cached = cache.get(comp);
+      if (cached) {
+          return cached;
       }
       const raw = comp.props;
       const normalized = {};
@@ -4766,7 +4728,8 @@ var VueRuntimeDOM = (function (exports) {
           }
       }
       if (!raw && !hasExtends) {
-          return (comp.__props = EMPTY_ARR);
+          cache.set(comp, EMPTY_ARR);
+          return EMPTY_ARR;
       }
       if (isArray(raw)) {
           for (let i = 0; i < raw.length; i++) {
@@ -4803,7 +4766,9 @@ var VueRuntimeDOM = (function (exports) {
               }
           }
       }
-      return (comp.__props = [normalized, needCastKeys]);
+      const res = [normalized, needCastKeys];
+      cache.set(comp, res);
+      return res;
   }
   function validatePropName(key) {
       if (key[0] !== '$') {
@@ -5136,12 +5101,16 @@ var VueRuntimeDOM = (function (exports) {
           }
           let hook = binding.dir[name];
           if (hook) {
+              // disable tracking inside all lifecycle hooks
+              // since they can potentially be called inside effects.
+              pauseTracking();
               callWithAsyncErrorHandling(hook, instance, 8 /* DIRECTIVE_HOOK */, [
                   vnode.el,
                   binding,
                   vnode,
                   prevVNode
               ]);
+              resetTracking();
           }
       }
   }
@@ -5161,7 +5130,10 @@ var VueRuntimeDOM = (function (exports) {
           mixins: [],
           components: {},
           directives: {},
-          provides: Object.create(null)
+          provides: Object.create(null),
+          optionsCache: new WeakMap(),
+          propsCache: new WeakMap(),
+          emitsCache: new WeakMap()
       };
   }
   let uid$1 = 0;
@@ -5211,11 +5183,6 @@ var VueRuntimeDOM = (function (exports) {
                   {
                       if (!context.mixins.includes(mixin)) {
                           context.mixins.push(mixin);
-                          // global mixin with props/emits de-optimizes props/emits
-                          // normalization caching.
-                          if (mixin.props || mixin.emits) {
-                              context.deopt = true;
-                          }
                       }
                       else {
                           warn('Mixin has already been applied to target app' +
@@ -5358,7 +5325,7 @@ var VueRuntimeDOM = (function (exports) {
                       nextNode = nextSibling(node);
                   }
                   break;
-              case Comment:
+              case Comment$1:
                   if (domType !== 8 /* COMMENT */ || isFragmentStart) {
                       nextNode = onMismatch();
                   }
@@ -5800,7 +5767,7 @@ var VueRuntimeDOM = (function (exports) {
               case Text:
                   processText(n1, n2, container, anchor);
                   break;
-              case Comment:
+              case Comment$1:
                   processCommentNode(n1, n2, container, anchor);
                   break;
               case Static:
@@ -6095,15 +6062,18 @@ var VueRuntimeDOM = (function (exports) {
               const newVNode = newChildren[i];
               // Determine the container (parent element) for the patch.
               const container = 
-              // - In the case of a Fragment, we need to provide the actual parent
-              // of the Fragment itself so it can move its children.
-              oldVNode.type === Fragment ||
-                  // - In the case of different nodes, there is going to be a replacement
-                  // which also requires the correct parent container
-                  !isSameVNodeType(oldVNode, newVNode) ||
-                  // - In the case of a component, it could contain anything.
-                  oldVNode.shapeFlag & 6 /* COMPONENT */ ||
-                  oldVNode.shapeFlag & 64 /* TELEPORT */
+              // oldVNode may be an errored async setup() component inside Suspense
+              // which will not have a mounted element
+              oldVNode.el &&
+                  // - In the case of a Fragment, we need to provide the actual parent
+                  // of the Fragment itself so it can move its children.
+                  (oldVNode.type === Fragment ||
+                      // - In the case of different nodes, there is going to be a replacement
+                      // which also requires the correct parent container
+                      !isSameVNodeType(oldVNode, newVNode) ||
+                      // - In the case of a component, it could contain anything.
+                      oldVNode.shapeFlag & 6 /* COMPONENT */ ||
+                      oldVNode.shapeFlag & 64 /* TELEPORT */)
                   ? hostParentNode(oldVNode.el)
                   : // In other cases, the parent container is not actually used so we
                       // just pass the block element here to avoid a DOM parentNode call.
@@ -6137,7 +6107,7 @@ var VueRuntimeDOM = (function (exports) {
           const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''));
           const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''));
           let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2;
-          if (patchFlag > 0) {
+          if (dynamicChildren) {
               optimized = true;
           }
           // check if this is a slot fragment with :slotted scope ids
@@ -6236,7 +6206,7 @@ var VueRuntimeDOM = (function (exports) {
               // Give it a placeholder if this is not hydration
               // TODO handle self-defined fallback
               if (!initialVNode.el) {
-                  const placeholder = (instance.subTree = createVNode(Comment));
+                  const placeholder = (instance.subTree = createVNode(Comment$1));
                   processCommentNode(null, placeholder, container, anchor);
               }
               return;
@@ -6983,7 +6953,7 @@ var VueRuntimeDOM = (function (exports) {
               }
               // also inherit for comment nodes, but not placeholders (e.g. v-if which
               // would have received .el during block patch)
-              if (c2.type === Comment && !c2.el) {
+              if (c2.type === Comment$1 && !c2.el) {
                   c2.el = c1.el;
               }
           }
@@ -7222,9 +7192,78 @@ var VueRuntimeDOM = (function (exports) {
   // Force-casted public typing for h and TSX props inference
   const Teleport = TeleportImpl;
 
+  const COMPONENTS = 'components';
+  const DIRECTIVES = 'directives';
+  /**
+   * @private
+   */
+  function resolveComponent(name, maybeSelfReference) {
+      return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name;
+  }
+  const NULL_DYNAMIC_COMPONENT = Symbol();
+  /**
+   * @private
+   */
+  function resolveDynamicComponent(component) {
+      if (isString(component)) {
+          return resolveAsset(COMPONENTS, component, false) || component;
+      }
+      else {
+          // invalid types will fallthrough to createVNode and raise warning
+          return (component || NULL_DYNAMIC_COMPONENT);
+      }
+  }
+  /**
+   * @private
+   */
+  function resolveDirective(name) {
+      return resolveAsset(DIRECTIVES, name);
+  }
+  // implementation
+  function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) {
+      const instance = currentRenderingInstance || currentInstance;
+      if (instance) {
+          const Component = instance.type;
+          // explicit self name has highest priority
+          if (type === COMPONENTS) {
+              const selfName = getComponentName(Component);
+              if (selfName &&
+                  (selfName === name ||
+                      selfName === camelize(name) ||
+                      selfName === capitalize(camelize(name)))) {
+                  return Component;
+              }
+          }
+          const res = 
+          // local registration
+          // check instance[type] first which is resolved for options API
+          resolve(instance[type] || Component[type], name) ||
+              // global registration
+              resolve(instance.appContext[type], name);
+          if (!res && maybeSelfReference) {
+              // fallback to implicit self-reference
+              return Component;
+          }
+          if (warnMissing && !res) {
+              warn(`Failed to resolve ${type.slice(0, -1)}: ${name}`);
+          }
+          return res;
+      }
+      else {
+          warn(`resolve${capitalize(type.slice(0, -1))} ` +
+              `can only be used in render() or setup().`);
+      }
+  }
+  function resolve(registry, name) {
+      return (registry &&
+          (registry[name] ||
+              registry[camelize(name)] ||
+              registry[capitalize(camelize(name))]));
+  }
+
   const Fragment = Symbol('Fragment' );
   const Text = Symbol('Text' );
-  const Comment = Symbol('Comment' );
+  const Comment$1 = Symbol('Comment' );
   const Static = Symbol('Static' );
   // Since v-if and v-for are the two possible ways node structure can dynamically
   // change, once we consider v-if branches and each v-for fragment a block, we
@@ -7343,7 +7382,7 @@ var VueRuntimeDOM = (function (exports) {
           if (!type) {
               warn(`Invalid vnode type when creating vnode: ${type}.`);
           }
-          type = Comment;
+          type = Comment$1;
       }
       if (isVNode(type)) {
           // createVNode receiving an existing vnode. This happens in cases like
@@ -7431,9 +7470,7 @@ var VueRuntimeDOM = (function (exports) {
       normalizeChildren(vnode, children);
       // normalize suspense children
       if (shapeFlag & 128 /* SUSPENSE */) {
-          const { content, fallback } = normalizeSuspenseChildren(vnode);
-          vnode.ssContent = content;
-          vnode.ssFallback = fallback;
+          type.normalize(vnode);
       }
       if (isBlockTreeEnabled > 0 &&
           // avoid a block node from tracking itself
@@ -7544,22 +7581,24 @@ var VueRuntimeDOM = (function (exports) {
   // block to ensure correct updates.
   asBlock = false) {
       return asBlock
-          ? (openBlock(), createBlock(Comment, null, text))
-          : createVNode(Comment, null, text);
+          ? (openBlock(), createBlock(Comment$1, null, text))
+          : createVNode(Comment$1, null, text);
   }
   function normalizeVNode(child) {
       if (child == null || typeof child === 'boolean') {
           // empty placeholder
-          return createVNode(Comment);
+          return createVNode(Comment$1);
       }
       else if (isArray(child)) {
           // fragment
-          return createVNode(Fragment, null, child);
+          return createVNode(Fragment, null, 
+          // #3666, avoid reference pollution when reusing vnode
+          child.slice());
       }
       else if (typeof child === 'object') {
           // already vnode, this should be the most common since compiled templates
           // always produce all-vnode children arrays
-          return child.el === null ? child : cloneVNode(child);
+          return cloneIfMounted(child);
       }
       else {
           // strings and numbers
@@ -7758,7 +7797,7 @@ var VueRuntimeDOM = (function (exports) {
       return vnodes.some(child => {
           if (!isVNode(child))
               return true;
-          if (child.type === Comment)
+          if (child.type === Comment$1)
               return false;
           if (child.type === Fragment &&
               !ensureValidVNode(child.children))
@@ -8072,6 +8111,8 @@ var VueRuntimeDOM = (function (exports) {
           emitted: null,
           // props default value
           propsDefaults: EMPTY_OBJ,
+          // inheritAttrs
+          inheritAttrs: type.inheritAttrs,
           // state
           ctx: EMPTY_OBJ,
           data: EMPTY_OBJ,
@@ -8280,7 +8321,7 @@ var VueRuntimeDOM = (function (exports) {
       {
           currentInstance = instance;
           pauseTracking();
-          applyOptions(instance, Component);
+          applyOptions(instance);
           resetTracking();
           currentInstance = null;
       }
@@ -8638,7 +8679,7 @@ var VueRuntimeDOM = (function (exports) {
   }
 
   // Core API ------------------------------------------------------------------
-  const version = "3.1.0-beta.5";
+  const version = "3.1.1";
   /**
    * SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
    * @internal
@@ -8869,6 +8910,9 @@ var VueRuntimeDOM = (function (exports) {
           if (el.value !== newValue) {
               el.value = newValue;
           }
+          if (value == null) {
+              el.removeAttribute(key);
+          }
           return;
       }
       if (value === '' || value == null) {
@@ -9156,6 +9200,29 @@ var VueRuntimeDOM = (function (exports) {
       leaveToClass: String
   };
   const TransitionPropsValidators = (Transition.props = /*#__PURE__*/ extend({}, BaseTransition.props, DOMTransitionPropsValidators));
+  /**
+   * #3227 Incoming hooks may be merged into arrays when wrapping Transition
+   * with custom HOCs.
+   */
+  const callHook$1 = (hook, args = []) => {
+      if (isArray(hook)) {
+          hook.forEach(h => h(...args));
+      }
+      else if (hook) {
+          hook(...args);
+      }
+  };
+  /**
+   * Check if a hook expects a callback (2nd arg), which means the user
+   * intends to explicitly control the end of the transition.
+   */
+  const hasExplicitCallback = (hook) => {
+      return hook
+          ? isArray(hook)
+              ? hook.some(h => h.length > 1)
+              : hook.length > 1
+          : false;
+  };
   function resolveTransitionProps(rawProps) {
       const baseProps = {};
       for (const key in rawProps) {
@@ -9185,11 +9252,11 @@ var VueRuntimeDOM = (function (exports) {
           return (el, done) => {
               const hook = isAppear ? onAppear : onEnter;
               const resolve = () => finishEnter(el, isAppear, done);
-              hook && hook(el, resolve);
+              callHook$1(hook, [el, resolve]);
               nextFrame(() => {
                   removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass);
                   addTransitionClass(el, isAppear ? appearToClass : enterToClass);
-                  if (!(hook && hook.length > 1)) {
+                  if (!hasExplicitCallback(hook)) {
                       whenTransitionEnds(el, type, enterDuration, resolve);
                   }
               });
@@ -9197,12 +9264,12 @@ var VueRuntimeDOM = (function (exports) {
       };
       return extend(baseProps, {
           onBeforeEnter(el) {
-              onBeforeEnter && onBeforeEnter(el);
+              callHook$1(onBeforeEnter, [el]);
               addTransitionClass(el, enterFromClass);
               addTransitionClass(el, enterActiveClass);
           },
           onBeforeAppear(el) {
-              onBeforeAppear && onBeforeAppear(el);
+              callHook$1(onBeforeAppear, [el]);
               addTransitionClass(el, appearFromClass);
               addTransitionClass(el, appearActiveClass);
           },
@@ -9217,23 +9284,23 @@ var VueRuntimeDOM = (function (exports) {
               nextFrame(() => {
                   removeTransitionClass(el, leaveFromClass);
                   addTransitionClass(el, leaveToClass);
-                  if (!(onLeave && onLeave.length > 1)) {
+                  if (!hasExplicitCallback(onLeave)) {
                       whenTransitionEnds(el, type, leaveDuration, resolve);
                   }
               });
-              onLeave && onLeave(el, resolve);
+              callHook$1(onLeave, [el, resolve]);
           },
           onEnterCancelled(el) {
               finishEnter(el, false);
-              onEnterCancelled && onEnterCancelled(el);
+              callHook$1(onEnterCancelled, [el]);
           },
           onAppearCancelled(el) {
               finishEnter(el, true);
-              onAppearCancelled && onAppearCancelled(el);
+              callHook$1(onAppearCancelled, [el]);
           },
           onLeaveCancelled(el) {
               finishLeave(el);
-              onLeaveCancelled && onLeaveCancelled(el);
+              callHook$1(onLeaveCancelled, [el]);
           }
       });
   }
@@ -9698,12 +9765,13 @@ var VueRuntimeDOM = (function (exports) {
           }
           else {
               if (looseEqual(getValue(option), value)) {
-                  el.selectedIndex = i;
+                  if (el.selectedIndex !== i)
+                      el.selectedIndex = i;
                   return;
               }
           }
       }
-      if (!isMultiple) {
+      if (!isMultiple && el.selectedIndex !== -1) {
           el.selectedIndex = -1;
       }
   }
@@ -9973,7 +10041,7 @@ var VueRuntimeDOM = (function (exports) {
   }
 
   exports.BaseTransition = BaseTransition;
-  exports.Comment = Comment;
+  exports.Comment = Comment$1;
   exports.Fragment = Fragment;
   exports.KeepAlive = KeepAlive;
   exports.Static = Static;