@vue/compat 3.2.22 → 3.2.26

package/dist/vue.global.js

@@ -110,7 +110,7 @@ var Vue = (function () {
   const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs);
   /**
    * Boolean attributes should be included if the value is truthy or ''.
-   * e.g. <select multiple> compiles to { multiple: '' }
+   * e.g. `<select multiple>` compiles to `{ multiple: '' }`
    */
   function includeBooleanAttr(value) {
       return !!value || value === '';
@@ -344,7 +344,7 @@ var Vue = (function () {
       '' + parseInt(key, 10) === key;
   const isReservedProp = /*#__PURE__*/ makeMap(
   // the leading comma is intentional so empty string "" is also included
-  ',key,ref,' +
+  ',key,ref,ref_for,ref_key,' +
       'onVnodeBeforeMount,onVnodeMounted,' +
       'onVnodeBeforeUpdate,onVnodeUpdated,' +
       'onVnodeBeforeUnmount,onVnodeUnmounted');
@@ -533,7 +533,7 @@ var Vue = (function () {
   let effectTrackDepth = 0;
   let trackOpBit = 1;
   /**
-   * The bitwise track markers support at most 30 levels op recursion.
+   * The bitwise track markers support at most 30 levels of recursion.
    * This value is chosen to enable modern JS engines to use a SMI on all platforms.
    * When recursion depth is greater, fall back to using a full cleanup.
    */
@@ -854,7 +854,7 @@ var Vue = (function () {
   function createSetter(shallow = false) {
       return function set(target, key, value, receiver) {
           let oldValue = target[key];
-          if (!shallow) {
+          if (!shallow && !isReadonly(value)) {
               value = toRaw(value);
               oldValue = toRaw(oldValue);
               if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
@@ -1439,21 +1439,25 @@ var Vue = (function () {
       return ret;
   }
   class ObjectRefImpl {
-      constructor(_object, _key) {
+      constructor(_object, _key, _defaultValue) {
           this._object = _object;
           this._key = _key;
+          this._defaultValue = _defaultValue;
           this.__v_isRef = true;
       }
       get value() {
-          return this._object[this._key];
+          const val = this._object[this._key];
+          return val === undefined ? this._defaultValue : val;
       }
       set value(newVal) {
           this._object[this._key] = newVal;
       }
   }
-  function toRef(object, key) {
+  function toRef(object, key, defaultValue) {
       const val = object[key];
-      return isRef(val) ? val : new ObjectRefImpl(object, key);
+      return isRef(val)
+          ? val
+          : new ObjectRefImpl(object, key, defaultValue);
   }
 
   class ComputedRefImpl {
@@ -1899,11 +1903,6 @@ var Vue = (function () {
               `Use "${newHook}" instead.`,
           link: `https://v3.vuejs.org/guide/migration/custom-directives.html`
       },
-      ["V_FOR_REF" /* V_FOR_REF */]: {
-          message: `Ref usage on v-for no longer creates array ref values in Vue 3. ` +
-              `Consider using function refs or refactor to avoid ref usage altogether.`,
-          link: `https://v3.vuejs.org/guide/migration/array-refs.html`
-      },
       ["V_ON_KEYCODE_MODIFIER" /* V_ON_KEYCODE_MODIFIER */]: {
           message: `Using keyCode as v-on modifier is no longer supported. ` +
               `Use kebab-case key name modifiers instead.`,
@@ -3310,7 +3309,8 @@ var Vue = (function () {
               const rawProps = toRaw(props);
               const { mode } = rawProps;
               // check mode
-              if (mode && !['in-out', 'out-in', 'default'].includes(mode)) {
+              if (mode &&
+                  mode !== 'in-out' && mode !== 'out-in' && mode !== 'default') {
                   warn$1(`invalid <transition> mode: ${mode}`);
               }
               // at this point children has a guaranteed length of 1.
@@ -3956,7 +3956,7 @@ var Vue = (function () {
                   }
                   current = current.parent;
               }
-              hook();
+              return hook();
           });
       injectHook(type, wrappedHook, target);
       // In addition to registering it on the target instance, we walk up the parent
@@ -4734,7 +4734,7 @@ var Vue = (function () {
                           continue;
                       }
                   }
-                  if (value !== attrs[key]) {
+                  if (!(key in attrs) || value !== attrs[key]) {
                       attrs[key] = value;
                       hasAttrsChanged = true;
                   }
@@ -5315,7 +5315,7 @@ var Vue = (function () {
               return vm;
           }
       }
-      Vue.version = "3.2.22";
+      Vue.version = "3.2.26";
       Vue.config = singletonApp.config;
       Vue.use = (p, ...options) => {
           if (p && isFunction(p.install)) {
@@ -5666,7 +5666,7 @@ var Vue = (function () {
   ];
   const patched = new WeakSet();
   function defineReactive(obj, key, val) {
-      // it's possible for the orignial object to be mutated after being defined
+      // it's possible for the original object to be mutated after being defined
       // and expecting reactivity... we are covering it here because this seems to
       // be a bit more common.
       if (isObject(val) && !isReactive(val) && !patched.has(val)) {
@@ -5886,6 +5886,102 @@ var Vue = (function () {
       };
   }
 
+  /**
+   * Function for handling a template ref
+   */
+  function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
+      if (isArray(rawRef)) {
+          rawRef.forEach((r, i) => setRef(r, oldRawRef && (isArray(oldRawRef) ? oldRawRef[i] : oldRawRef), parentSuspense, vnode, isUnmount));
+          return;
+      }
+      if (isAsyncWrapper(vnode) && !isUnmount) {
+          // when mounting async components, nothing needs to be done,
+          // because the template ref is forwarded to inner component
+          return;
+      }
+      const refValue = vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */
+          ? getExposeProxy(vnode.component) || vnode.component.proxy
+          : vnode.el;
+      const value = isUnmount ? null : refValue;
+      const { i: owner, r: ref } = rawRef;
+      if (!owner) {
+          warn$1(`Missing ref owner context. ref cannot be used on hoisted vnodes. ` +
+              `A vnode with ref must be created inside the render function.`);
+          return;
+      }
+      const oldRef = oldRawRef && oldRawRef.r;
+      const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs;
+      const setupState = owner.setupState;
+      // dynamic ref changed. unset old ref
+      if (oldRef != null && oldRef !== ref) {
+          if (isString(oldRef)) {
+              refs[oldRef] = null;
+              if (hasOwn(setupState, oldRef)) {
+                  setupState[oldRef] = null;
+              }
+          }
+          else if (isRef(oldRef)) {
+              oldRef.value = null;
+          }
+      }
+      if (isFunction(ref)) {
+          callWithErrorHandling(ref, owner, 12 /* FUNCTION_REF */, [value, refs]);
+      }
+      else {
+          const _isString = isString(ref);
+          const _isRef = isRef(ref);
+          if (_isString || _isRef) {
+              const doSet = () => {
+                  if (rawRef.f) {
+                      const existing = _isString ? refs[ref] : ref.value;
+                      if (isUnmount) {
+                          isArray(existing) && remove(existing, refValue);
+                      }
+                      else {
+                          if (!isArray(existing)) {
+                              if (_isString) {
+                                  refs[ref] = [refValue];
+                              }
+                              else {
+                                  ref.value = [refValue];
+                                  if (rawRef.k)
+                                      refs[rawRef.k] = ref.value;
+                              }
+                          }
+                          else if (!existing.includes(refValue)) {
+                              existing.push(refValue);
+                          }
+                      }
+                  }
+                  else if (_isString) {
+                      refs[ref] = value;
+                      if (hasOwn(setupState, ref)) {
+                          setupState[ref] = value;
+                      }
+                  }
+                  else if (isRef(ref)) {
+                      ref.value = value;
+                      if (rawRef.k)
+                          refs[rawRef.k] = value;
+                  }
+                  else {
+                      warn$1('Invalid template ref type:', ref, `(${typeof ref})`);
+                  }
+              };
+              if (value) {
+                  doSet.id = -1;
+                  queuePostRenderEffect(doSet, parentSuspense);
+              }
+              else {
+                  doSet();
+              }
+          }
+          else {
+              warn$1('Invalid template ref type:', ref, `(${typeof ref})`);
+          }
+      }
+  }
+
   let hasMismatch = false;
   const isSVGContainer = (container) => /svg/.test(container.namespaceURI) && container.tagName !== 'foreignObject';
   const isComment = (node) => node.nodeType === 8 /* COMMENT */;
@@ -6247,44 +6343,6 @@ var Vue = (function () {
       return supported;
   }
 
-  function convertLegacyRefInFor(vnode) {
-      // refInFor
-      if (vnode.props && vnode.props.refInFor) {
-          delete vnode.props.refInFor;
-          if (vnode.ref) {
-              if (isArray(vnode.ref)) {
-                  vnode.ref.forEach(r => (r.f = true));
-              }
-              else {
-                  vnode.ref.f = true;
-              }
-          }
-      }
-  }
-  function registerLegacyRef(refs, key, value, owner, isInFor, isUnmount) {
-      const existing = refs[key];
-      if (isUnmount) {
-          if (isArray(existing)) {
-              remove(existing, value);
-          }
-          else {
-              refs[key] = null;
-          }
-      }
-      else if (isInFor) {
-          warnDeprecation("V_FOR_REF" /* V_FOR_REF */, owner);
-          if (!isArray(existing)) {
-              refs[key] = [value];
-          }
-          else if (!existing.includes(value)) {
-              existing.push(value);
-          }
-      }
-      else {
-          refs[key] = value;
-      }
-  }
-
   const queuePostRenderEffect = queueEffectWithSuspense
       ;
   /**
@@ -6556,12 +6614,15 @@ var Vue = (function () {
           const oldProps = n1.props || EMPTY_OBJ;
           const newProps = n2.props || EMPTY_OBJ;
           let vnodeHook;
+          // disable recurse in beforeUpdate hooks
+          parentComponent && toggleRecurse(parentComponent, false);
           if ((vnodeHook = newProps.onVnodeBeforeUpdate)) {
               invokeVNodeHook(vnodeHook, parentComponent, n2, n1);
           }
           if (dirs) {
               invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate');
           }
+          parentComponent && toggleRecurse(parentComponent, true);
           if (isHmrUpdating) {
               // HMR updated, force full diff
               patchFlag = 0;
@@ -6845,7 +6906,7 @@ var Vue = (function () {
                   const { el, props } = initialVNode;
                   const { bm, m, parent } = instance;
                   const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);
-                  effect.allowRecurse = false;
+                  toggleRecurse(instance, false);
                   // beforeMount hook
                   if (bm) {
                       invokeArrayFns(bm);
@@ -6858,7 +6919,7 @@ var Vue = (function () {
                   if (isCompatEnabled("INSTANCE_EVENT_HOOKS" /* INSTANCE_EVENT_HOOKS */, instance)) {
                       instance.emit('hook:beforeMount');
                   }
-                  effect.allowRecurse = true;
+                  toggleRecurse(instance, true);
                   if (el && hydrateNode) {
                       // vnode has adopted host node - perform hydration instead of mount.
                       const hydrateSubTree = () => {
@@ -6946,7 +7007,7 @@ var Vue = (function () {
                       pushWarningContext(next || instance.vnode);
                   }
                   // Disallow component effect recursion during pre-lifecycle hooks.
-                  effect.allowRecurse = false;
+                  toggleRecurse(instance, false);
                   if (next) {
                       next.el = vnode.el;
                       updateComponentPreRender(instance, next, optimized);
@@ -6965,7 +7026,7 @@ var Vue = (function () {
                   if (isCompatEnabled("INSTANCE_EVENT_HOOKS" /* INSTANCE_EVENT_HOOKS */, instance)) {
                       instance.emit('hook:beforeUpdate');
                   }
-                  effect.allowRecurse = true;
+                  toggleRecurse(instance, true);
                   // render
                   {
                       startMeasure(instance, `render`);
@@ -7014,13 +7075,13 @@ var Vue = (function () {
               }
           };
           // create reactive effect for rendering
-          const effect = new ReactiveEffect(componentUpdateFn, () => queueJob(instance.update), instance.scope // track it in component's effect scope
-          );
+          const effect = (instance.effect = new ReactiveEffect(componentUpdateFn, () => queueJob(instance.update), instance.scope // track it in component's effect scope
+          ));
           const update = (instance.update = effect.run.bind(effect));
           update.id = instance.uid;
           // allowRecurse
           // #1801, #2043 component render effects should allow recursive updates
-          effect.allowRecurse = update.allowRecurse = true;
+          toggleRecurse(instance, true);
           {
               effect.onTrack = instance.rtc
                   ? e => invokeArrayFns(instance.rtc, e)
@@ -7550,88 +7611,8 @@ var Vue = (function () {
           createApp: createAppAPI(render, hydrate)
       };
   }
-  function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
-      if (isArray(rawRef)) {
-          rawRef.forEach((r, i) => setRef(r, oldRawRef && (isArray(oldRawRef) ? oldRawRef[i] : oldRawRef), parentSuspense, vnode, isUnmount));
-          return;
-      }
-      if (isAsyncWrapper(vnode) && !isUnmount) {
-          // when mounting async components, nothing needs to be done,
-          // because the template ref is forwarded to inner component
-          return;
-      }
-      const refValue = vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */
-          ? getExposeProxy(vnode.component) || vnode.component.proxy
-          : vnode.el;
-      const value = isUnmount ? null : refValue;
-      const { i: owner, r: ref } = rawRef;
-      if (!owner) {
-          warn$1(`Missing ref owner context. ref cannot be used on hoisted vnodes. ` +
-              `A vnode with ref must be created inside the render function.`);
-          return;
-      }
-      const oldRef = oldRawRef && oldRawRef.r;
-      const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs;
-      const setupState = owner.setupState;
-      // dynamic ref changed. unset old ref
-      if (oldRef != null && oldRef !== ref) {
-          if (isString(oldRef)) {
-              refs[oldRef] = null;
-              if (hasOwn(setupState, oldRef)) {
-                  setupState[oldRef] = null;
-              }
-          }
-          else if (isRef(oldRef)) {
-              oldRef.value = null;
-          }
-      }
-      if (isString(ref)) {
-          const doSet = () => {
-              if (isCompatEnabled("V_FOR_REF" /* V_FOR_REF */, owner)) {
-                  registerLegacyRef(refs, ref, refValue, owner, rawRef.f, isUnmount);
-              }
-              else {
-                  refs[ref] = value;
-              }
-              if (hasOwn(setupState, ref)) {
-                  setupState[ref] = value;
-              }
-          };
-          // #1789: for non-null values, set them after render
-          // null values means this is unmount and it should not overwrite another
-          // ref with the same key
-          if (value) {
-              doSet.id = -1;
-              queuePostRenderEffect(doSet, parentSuspense);
-          }
-          else {
-              doSet();
-          }
-      }
-      else if (isRef(ref)) {
-          const doSet = () => {
-              ref.value = value;
-          };
-          if (value) {
-              doSet.id = -1;
-              queuePostRenderEffect(doSet, parentSuspense);
-          }
-          else {
-              doSet();
-          }
-      }
-      else if (isFunction(ref)) {
-          callWithErrorHandling(ref, owner, 12 /* FUNCTION_REF */, [value, refs]);
-      }
-      else {
-          warn$1('Invalid template ref type:', value, `(${typeof value})`);
-      }
-  }
-  function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {
-      callWithAsyncErrorHandling(hook, instance, 7 /* VNODE_HOOK */, [
-          vnode,
-          prevVNode
-      ]);
+  function toggleRecurse({ effect, update }, allowed) {
+      effect.allowRecurse = update.allowRecurse = allowed;
   }
   /**
    * #1156
@@ -8280,6 +8261,7 @@ var Vue = (function () {
       };
       Func.props = comp.props;
       Func.displayName = comp.name;
+      Func.compatConfig = comp.compatConfig;
       // v2 functional components do not inherit attrs
       Func.inheritAttrs = false;
       normalizedFunctionalComponentMap.set(comp, Func);
@@ -8425,10 +8407,10 @@ var Vue = (function () {
   };
   const InternalObjectKey = `__vInternal`;
   const normalizeKey = ({ key }) => key != null ? key : null;
-  const normalizeRef = ({ ref }) => {
+  const normalizeRef = ({ ref, ref_key, ref_for }) => {
       return (ref != null
           ? isString(ref) || isRef(ref) || isFunction(ref)
-              ? { i: currentRenderingInstance, r: ref }
+              ? { i: currentRenderingInstance, r: ref, k: ref_key, f: !!ref_for }
               : ref
           : null);
   };
@@ -8496,7 +8478,6 @@ var Vue = (function () {
       }
       {
           convertLegacyVModelProps(vnode);
-          convertLegacyRefInFor(vnode);
           defineLegacyVNodeProperties(vnode);
       }
       return vnode;
@@ -8782,6 +8763,12 @@ var Vue = (function () {
           }
       }
       return ret;
+  }
+  function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {
+      callWithAsyncErrorHandling(hook, instance, 7 /* VNODE_HOOK */, [
+          vnode,
+          prevVNode
+      ]);
   }
 
   function getCompatChildren(instance) {
@@ -9214,23 +9201,23 @@ var Vue = (function () {
               const n = accessCache[key];
               if (n !== undefined) {
                   switch (n) {
-                      case 0 /* SETUP */:
+                      case 1 /* SETUP */:
                           return setupState[key];
-                      case 1 /* DATA */:
+                      case 2 /* DATA */:
                           return data[key];
-                      case 3 /* CONTEXT */:
+                      case 4 /* CONTEXT */:
                           return ctx[key];
-                      case 2 /* PROPS */:
+                      case 3 /* PROPS */:
                           return props[key];
                       // default: just fallthrough
                   }
               }
               else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
-                  accessCache[key] = 0 /* SETUP */;
+                  accessCache[key] = 1 /* SETUP */;
                   return setupState[key];
               }
               else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
-                  accessCache[key] = 1 /* DATA */;
+                  accessCache[key] = 2 /* DATA */;
                   return data[key];
               }
               else if (
@@ -9238,15 +9225,15 @@ var Vue = (function () {
               // props
               (normalizedProps = instance.propsOptions[0]) &&
                   hasOwn(normalizedProps, key)) {
-                  accessCache[key] = 2 /* PROPS */;
+                  accessCache[key] = 3 /* PROPS */;
                   return props[key];
               }
               else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
-                  accessCache[key] = 3 /* CONTEXT */;
+                  accessCache[key] = 4 /* CONTEXT */;
                   return ctx[key];
               }
               else if (shouldCacheAccess) {
-                  accessCache[key] = 4 /* OTHER */;
+                  accessCache[key] = 0 /* OTHER */;
               }
           }
           const publicGetter = publicPropertiesMap[key];
@@ -9267,7 +9254,7 @@ var Vue = (function () {
           }
           else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
               // user may set custom properties to `this` that start with `$`
-              accessCache[key] = 3 /* CONTEXT */;
+              accessCache[key] = 4 /* CONTEXT */;
               return ctx[key];
           }
           else if (
@@ -9335,7 +9322,7 @@ var Vue = (function () {
       },
       has({ _: { data, setupState, accessCache, ctx, appContext, propsOptions } }, key) {
           let normalizedProps;
-          return (accessCache[key] !== undefined ||
+          return (!!accessCache[key] ||
               (data !== EMPTY_OBJ && hasOwn(data, key)) ||
               (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) ||
               ((normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key)) ||
@@ -9441,6 +9428,7 @@ var Vue = (function () {
           root: null,
           next: null,
           subTree: null,
+          effect: null,
           update: null,
           scope: new EffectScope(true /* detached */),
           render: null,
@@ -10905,7 +10893,7 @@ var Vue = (function () {
   }
 
   // Core API ------------------------------------------------------------------
-  const version = "3.2.22";
+  const version = "3.2.26";
   /**
    * SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
    * @internal
@@ -11172,12 +11160,19 @@ var Vue = (function () {
           el[key] = value == null ? '' : value;
           return;
       }
-      if (key === 'value' && el.tagName !== 'PROGRESS') {
+      if (key === 'value' &&
+          el.tagName !== 'PROGRESS' &&
+          // custom elements may use _value internally
+          !el.tagName.includes('-')) {
           // store value as _value as well since
           // non-string values will be stringified.
           el._value = value;
           const newValue = value == null ? '' : value;
-          if (el.value !== newValue) {
+          if (el.value !== newValue ||
+              // #4956: always set for OPTION elements because its value falls back to
+              // textContent if no value attribute is present. And setting .value for
+              // OPTION has no side effect
+              el.tagName === 'OPTION') {
               el.value = newValue;
           }
           if (value == null) {
@@ -11573,7 +11568,7 @@ var Vue = (function () {
                   // HMR
                   {
                       instance.ceReload = newStyles => {
-                          // alawys reset styles
+                          // always reset styles
                           if (this._styles) {
                               this._styles.forEach(s => this.shadowRoot.removeChild(s));
                               this._styles.length = 0;
@@ -13297,12 +13292,12 @@ var Vue = (function () {
           }
           else if (p.name === 'bind' &&
               (p.exp || allowEmpty) &&
-              isBindKey(p.arg, name)) {
+              isStaticArgOf(p.arg, name)) {
               return p;
           }
       }
   }
-  function isBindKey(arg, name) {
+  function isStaticArgOf(arg, name) {
       return !!(arg && isStaticExp(arg) && arg.content === name);
   }
   function hasDynamicKeyVBind(node) {
@@ -13345,7 +13340,6 @@ var Vue = (function () {
   }
   function injectProp(node, prop, context) {
       let propsWithInjection;
-      const originalProps = node.type === 13 /* VNODE_CALL */ ? node.props : node.arguments[2];
       /**
        * 1. mergeProps(...)
        * 2. toHandlers(...)
@@ -13354,7 +13348,7 @@ var Vue = (function () {
        *
        * we need to get the real props before normalization
        */
-      let props = originalProps;
+      let props = node.type === 13 /* VNODE_CALL */ ? node.props : node.arguments[2];
       let callPath = [];
       let parentCall;
       if (props &&
@@ -13493,11 +13487,6 @@ var Vue = (function () {
               `data source.`,
           link: `https://v3.vuejs.org/guide/migration/v-if-v-for.html`
       },
-      ["COMPILER_V_FOR_REF" /* COMPILER_V_FOR_REF */]: {
-          message: `Ref usage on v-for no longer creates array ref values in Vue 3. ` +
-              `Consider using function refs or refactor to avoid ref usage altogether.`,
-          link: `https://v3.vuejs.org/guide/migration/array-refs.html`
-      },
       ["COMPILER_NATIVE_TEMPLATE" /* COMPILER_NATIVE_TEMPLATE */]: {
           message: `<template> with no special directives will render as a native template ` +
               `element instead of its inner content in Vue 3.`
@@ -14015,7 +14004,7 @@ var Vue = (function () {
               else if (
               // :is on plain element - only treat as component in compat mode
               p.name === 'bind' &&
-                  isBindKey(p.arg, 'is') &&
+                  isStaticArgOf(p.arg, 'is') &&
                   true &&
                   checkCompatEnabled$1("COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */, context, p.loc)) {
                   return true;
@@ -14375,15 +14364,6 @@ var Vue = (function () {
           !isSlotOutlet(child));
   }
   function walk$1(node, context, doNotHoistNode = false) {
-      // Some transforms, e.g. transformAssetUrls from @vue/compiler-sfc, replaces
-      // static bindings with expressions. These expressions are guaranteed to be
-      // constant so they are still eligible for hoisting, but they are only
-      // available at runtime and therefore cannot be evaluated ahead of time.
-      // This is only a concern for pre-stringification (via transformHoist by
-      // @vue/compiler-dom), but doing it here allows us to perform only one full
-      // walk of the AST and allow `stringifyStatic` to stop walking as soon as its
-      // stringification threshold is met.
-      let canStringify = true;
       const { children } = node;
       const originalCount = children.length;
       let hoistedCount = 0;
@@ -14396,9 +14376,6 @@ var Vue = (function () {
                   ? 0 /* NOT_CONSTANT */
                   : getConstantType(child, context);
               if (constantType > 0 /* NOT_CONSTANT */) {
-                  if (constantType < 3 /* CAN_STRINGIFY */) {
-                      canStringify = false;
-                  }
                   if (constantType >= 2 /* CAN_HOIST */) {
                       child.codegenNode.patchFlag =
                           -1 /* HOISTED */ + (` /* HOISTED */` );
@@ -14429,17 +14406,10 @@ var Vue = (function () {
                   }
               }
           }
-          else if (child.type === 12 /* TEXT_CALL */) {
-              const contentType = getConstantType(child.content, context);
-              if (contentType > 0) {
-                  if (contentType < 3 /* CAN_STRINGIFY */) {
-                      canStringify = false;
-                  }
-                  if (contentType >= 2 /* CAN_HOIST */) {
-                      child.codegenNode = context.hoist(child.codegenNode);
-                      hoistedCount++;
-                  }
-              }
+          else if (child.type === 12 /* TEXT_CALL */ &&
+              getConstantType(child.content, context) >= 2 /* CAN_HOIST */) {
+              child.codegenNode = context.hoist(child.codegenNode);
+              hoistedCount++;
           }
           // walk further
           if (child.type === 1 /* ELEMENT */) {
@@ -14463,7 +14433,7 @@ var Vue = (function () {
               }
           }
       }
-      if (canStringify && hoistedCount && context.transformHoist) {
+      if (hoistedCount && context.transformHoist) {
           context.transformHoist(children, context, node);
       }
       // all children were hoisted - the entire children array is hoistable.
@@ -14492,6 +14462,11 @@ var Vue = (function () {
               if (codegenNode.type !== 13 /* VNODE_CALL */) {
                   return 0 /* NOT_CONSTANT */;
               }
+              if (codegenNode.isBlock &&
+                  node.tag !== 'svg' &&
+                  node.tag !== 'foreignObject') {
+                  return 0 /* NOT_CONSTANT */;
+              }
               const flag = getPatchFlag(codegenNode);
               if (!flag) {
                   let returnType = 3 /* CAN_STRINGIFY */;
@@ -14628,7 +14603,7 @@ var Vue = (function () {
               else if (value.type === 14 /* JS_CALL_EXPRESSION */) {
                   // some helper calls can be hoisted,
                   // such as the `normalizeProps` generated by the compiler for pre-normalize class,
-                  // in this case we need to respect the ConstantType of the helper's argments
+                  // in this case we need to respect the ConstantType of the helper's arguments
                   valueType = getConstantTypeOfHelperCall(value, context);
               }
               else {
@@ -16295,10 +16270,7 @@ var Vue = (function () {
                   // updates inside get proper isSVG flag at runtime. (#639, #643)
                   // This is technically web-specific, but splitting the logic out of core
                   // leads to too much unnecessary complexity.
-                  (tag === 'svg' ||
-                      tag === 'foreignObject' ||
-                      // #938: elements with dynamic keys should be forced into blocks
-                      findProp(node, 'key', true)));
+                  (tag === 'svg' || tag === 'foreignObject'));
           // props
           if (props.length > 0) {
               const propsBuildResult = buildProps(node, context);
@@ -16310,6 +16282,9 @@ var Vue = (function () {
                   directives && directives.length
                       ? createArrayExpression(directives.map(dir => buildDirectiveArgs(dir, context)))
                       : undefined;
+              if (propsBuildResult.shouldUseBlock) {
+                  shouldUseBlock = true;
+              }
           }
           // children
           if (node.children.length > 0) {
@@ -16438,11 +16413,13 @@ var Vue = (function () {
       return toValidAssetId(tag, `component`);
   }
   function buildProps(node, context, props = node.props, ssr = false) {
-      const { tag, loc: elementLoc } = node;
+      const { tag, loc: elementLoc, children } = node;
       const isComponent = node.tagType === 1 /* COMPONENT */;
       let properties = [];
       const mergeArgs = [];
       const runtimeDirectives = [];
+      const hasChildren = children.length > 0;
+      let shouldUseBlock = false;
       // patchFlag analysis
       let patchFlag = 0;
       let hasRef = false;
@@ -16505,9 +16482,12 @@ var Vue = (function () {
           const prop = props[i];
           if (prop.type === 6 /* ATTRIBUTE */) {
               const { loc, name, value } = prop;
-              let valueNode = createSimpleExpression(value ? value.content : '', true, value ? value.loc : loc);
+              let isStatic = true;
               if (name === 'ref') {
                   hasRef = true;
+                  if (context.scopes.vFor > 0) {
+                      properties.push(createObjectProperty(createSimpleExpression('ref_for', true), createSimpleExpression('true')));
+                  }
               }
               // skip is on <component>, or is="vue:xxx"
               if (name === 'is' &&
@@ -16516,7 +16496,7 @@ var Vue = (function () {
                       (isCompatEnabled$1("COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */, context)))) {
                   continue;
               }
-              properties.push(createObjectProperty(createSimpleExpression(name, true, getInnerRange(loc, 0, name.length)), valueNode));
+              properties.push(createObjectProperty(createSimpleExpression(name, true, getInnerRange(loc, 0, name.length)), createSimpleExpression(value ? value.content : '', isStatic, value ? value.loc : loc)));
           }
           else {
               // directives
@@ -16537,7 +16517,7 @@ var Vue = (function () {
               // skip v-is and :is on <component>
               if (name === 'is' ||
                   (isVBind &&
-                      isBindKey(arg, 'is') &&
+                      isStaticArgOf(arg, 'is') &&
                       (isComponentTag(tag) ||
                           (isCompatEnabled$1("COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */, context))))) {
                   continue;
@@ -16546,6 +16526,17 @@ var Vue = (function () {
               if (isVOn && ssr) {
                   continue;
               }
+              if (
+              // #938: elements with dynamic keys should be forced into blocks
+              (isVBind && isStaticArgOf(arg, 'key')) ||
+                  // inline before-update hooks need to force block so that it is invoked
+                  // before children
+                  (isVOn && hasChildren && isStaticArgOf(arg, 'vue:before-update'))) {
+                  shouldUseBlock = true;
+              }
+              if (isVBind && isStaticArgOf(arg, 'ref') && context.scopes.vFor > 0) {
+                  properties.push(createObjectProperty(createSimpleExpression('ref_for', true), createSimpleExpression('true')));
+              }
               // special case for v-bind and v-on with no argument
               if (!arg && (isVBind || isVOn)) {
                   hasDynamicKeys = true;
@@ -16619,14 +16610,13 @@ var Vue = (function () {
               else {
                   // no built-in transform, this is a user custom directive.
                   runtimeDirectives.push(prop);
+                  // custom dirs may use beforeUpdate so they need to force blocks
+                  // to ensure before-update gets called before children update
+                  if (hasChildren) {
+                      shouldUseBlock = true;
+                  }
               }
           }
-          if (prop.type === 6 /* ATTRIBUTE */ &&
-              prop.name === 'ref' &&
-              context.scopes.vFor > 0 &&
-              checkCompatEnabled$1("COMPILER_V_FOR_REF" /* COMPILER_V_FOR_REF */, context, prop.loc)) {
-              properties.push(createObjectProperty(createSimpleExpression('refInFor', true), createSimpleExpression('true', false)));
-          }
       }
       let propsExpression = undefined;
       // has v-bind="object" or v-on="object", wrap with mergeProps
@@ -16663,7 +16653,8 @@ var Vue = (function () {
               patchFlag |= 32 /* HYDRATE_EVENTS */;
           }
       }
-      if ((patchFlag === 0 || patchFlag === 32 /* HYDRATE_EVENTS */) &&
+      if (!shouldUseBlock &&
+          (patchFlag === 0 || patchFlag === 32 /* HYDRATE_EVENTS */) &&
           (hasRef || hasVnodeHook || runtimeDirectives.length > 0)) {
           patchFlag |= 512 /* NEED_PATCH */;
       }
@@ -16730,7 +16721,8 @@ var Vue = (function () {
           props: propsExpression,
           directives: runtimeDirectives,
           patchFlag,
-          dynamicPropNames
+          dynamicPropNames,
+          shouldUseBlock
       };
   }
   // Dedupe props in an object literal.
@@ -16866,7 +16858,7 @@ var Vue = (function () {
               }
           }
           else {
-              if (p.name === 'bind' && isBindKey(p.arg, 'name')) {
+              if (p.name === 'bind' && isStaticArgOf(p.arg, 'name')) {
                   if (p.exp)
                       slotName = p.exp;
               }
@@ -16900,7 +16892,11 @@ var Vue = (function () {
       let eventName;
       if (arg.type === 4 /* SIMPLE_EXPRESSION */) {
           if (arg.isStatic) {
-              const rawName = arg.content;
+              let rawName = arg.content;
+              // TODO deprecate @vnodeXXX usage
+              if (rawName.startsWith('vue:')) {
+                  rawName = `vnode-${rawName.slice(4)}`;
+              }
               // for all event listeners, auto convert it to camelCase. See issue #2249
               eventName = createSimpleExpression(toHandlerKey(camelize(rawName)), true, arg.loc);
           }