vue 2.7.2 → 2.7.3

package/dist/vue.runtime.mjs

@@ -1,5 +1,5 @@
 /*!
- * Vue.js v2.7.2
+ * Vue.js v2.7.3
  * (c) 2014-2022 Evan You
  * Released under the MIT License.
  */
@@ -324,7 +324,9 @@ var LIFECYCLE_HOOKS = [
     'activated',
     'deactivated',
     'errorCaptured',
-    'serverPrefetch'
+    'serverPrefetch',
+    'renderTracked',
+    'renderTriggered'
 ];
 
 var config = {
@@ -879,7 +881,7 @@ function makeReactive(target, shallow) {
                 warn("Target is already a ".concat(existingOb.shallow ? "" : "non-", "shallow reactive object, and cannot be converted to ").concat(shallow ? "" : "non-", "shallow."));
             }
         }
-        var ob = observe(target, shallow);
+        var ob = observe(target, shallow, isServerRendering() /* ssr mock reactivity */);
         if (process.env.NODE_ENV !== 'production' && !ob) {
             if (target == null || isPrimitive(target)) {
                 warn("value cannot be made reactive: ".concat(String(target)));
@@ -941,7 +943,7 @@ function createRef(rawValue, shallow) {
     var ref = {};
     def(ref, RefFlag, true);
     def(ref, "__v_isShallow" /* ReactiveFlags.IS_SHALLOW */, true);
-    ref.dep = defineReactive(ref, 'value', rawValue, null, shallow);
+    def(ref, 'dep', defineReactive(ref, 'value', rawValue, null, shallow, isServerRendering()));
     return ref;
 }
 function triggerRef(ref) {
@@ -4213,7 +4215,7 @@ var onServerPrefetch = createLifeCycle('serverPrefetch');
 var onRenderTracked = createLifeCycle('renderTracked');
 var onRenderTriggered = createLifeCycle('renderTriggered');
 
-var version = '2.7.2';
+var version = '2.7.3';
 /**
  * @internal type is manually declared in <root>/types/v3-define-component.d.ts
  */
@@ -4231,6 +4233,13 @@ var shouldObserve = true;
 function toggleObserving(value) {
     shouldObserve = value;
 }
+// ssr mock dep
+var mockDep = {
+    notify: noop,
+    depend: noop,
+    addSub: noop,
+    removeSub: noop
+};
 /**
  * Observer class that is attached to each observed
  * object. Once attached, the observer converts the target
@@ -4238,78 +4247,63 @@ function toggleObserving(value) {
  * collect dependencies and dispatch updates.
  */
 var Observer = /** @class */ (function () {
-    function Observer(value, shallow) {
+    function Observer(value, shallow, mock) {
         if (shallow === void 0) { shallow = false; }
+        if (mock === void 0) { mock = false; }
         this.value = value;
         this.shallow = shallow;
+        this.mock = mock;
         // this.value = value
-        this.dep = new Dep();
+        this.dep = mock ? mockDep : new Dep();
         this.vmCount = 0;
         def(value, '__ob__', this);
         if (isArray(value)) {
-            if (hasProto) {
-                protoAugment(value, arrayMethods);
-            }
-            else {
-                copyAugment(value, arrayMethods, arrayKeys);
+            if (!mock) {
+                if (hasProto) {
+                    value.__proto__ = arrayMethods;
+                    /* eslint-enable no-proto */
+                }
+                else {
+                    for (var i = 0, l = arrayKeys.length; i < l; i++) {
+                        var key = arrayKeys[i];
+                        def(value, key, arrayMethods[key]);
+                    }
+                }
             }
             if (!shallow) {
                 this.observeArray(value);
             }
         }
         else {
-            this.walk(value, shallow);
+            /**
+             * Walk through all properties and convert them into
+             * getter/setters. This method should only be called when
+             * value type is Object.
+             */
+            var keys = Object.keys(value);
+            for (var i = 0; i < keys.length; i++) {
+                var key = keys[i];
+                defineReactive(value, key, NO_INIITIAL_VALUE, undefined, shallow, mock);
+            }
         }
     }
-    /**
-     * Walk through all properties and convert them into
-     * getter/setters. This method should only be called when
-     * value type is Object.
-     */
-    Observer.prototype.walk = function (obj, shallow) {
-        var keys = Object.keys(obj);
-        for (var i = 0; i < keys.length; i++) {
-            var key = keys[i];
-            defineReactive(obj, key, NO_INIITIAL_VALUE, undefined, shallow);
-        }
-    };
     /**
      * Observe a list of Array items.
      */
-    Observer.prototype.observeArray = function (items) {
-        for (var i = 0, l = items.length; i < l; i++) {
-            observe(items[i]);
+    Observer.prototype.observeArray = function (value) {
+        for (var i = 0, l = value.length; i < l; i++) {
+            observe(value[i], false, this.mock);
         }
     };
     return Observer;
 }());
 // helpers
-/**
- * Augment a target Object or Array by intercepting
- * the prototype chain using __proto__
- */
-function protoAugment(target, src) {
-    /* eslint-disable no-proto */
-    target.__proto__ = src;
-    /* eslint-enable no-proto */
-}
-/**
- * Augment a target Object or Array by defining
- * hidden properties.
- */
-/* istanbul ignore next */
-function copyAugment(target, src, keys) {
-    for (var i = 0, l = keys.length; i < l; i++) {
-        var key = keys[i];
-        def(target, key, src[key]);
-    }
-}
 /**
  * Attempt to create an observer instance for a value,
  * returns the new observer if successfully observed,
  * or the existing observer if the value already has one.
  */
-function observe(value, shallow) {
+function observe(value, shallow, ssrMockReactivity) {
     if (!isObject(value) || isRef(value) || value instanceof VNode) {
         return;
     }
@@ -4318,18 +4312,18 @@ function observe(value, shallow) {
         ob = value.__ob__;
     }
     else if (shouldObserve &&
-        !isServerRendering() &&
+        (ssrMockReactivity || !isServerRendering()) &&
         (isArray(value) || isPlainObject(value)) &&
         Object.isExtensible(value) &&
-        !value.__v_skip) {
-        ob = new Observer(value, shallow);
+        !value.__v_skip /* ReactiveFlags.SKIP */) {
+        ob = new Observer(value, shallow, ssrMockReactivity);
     }
     return ob;
 }
 /**
  * Define a reactive property on an Object.
  */
-function defineReactive(obj, key, val, customSetter, shallow) {
+function defineReactive(obj, key, val, customSetter, shallow, mock) {
     var dep = new Dep();
     var property = Object.getOwnPropertyDescriptor(obj, key);
     if (property && property.configurable === false) {
@@ -4342,7 +4336,7 @@ function defineReactive(obj, key, val, customSetter, shallow) {
         (val === NO_INIITIAL_VALUE || arguments.length === 2)) {
         val = obj[key];
     }
-    var childOb = !shallow && observe(val);
+    var childOb = !shallow && observe(val, false, mock);
     Object.defineProperty(obj, key, {
         enumerable: true,
         configurable: true,
@@ -4390,7 +4384,7 @@ function defineReactive(obj, key, val, customSetter, shallow) {
             else {
                 val = newVal;
             }
-            childOb = !shallow && observe(newVal);
+            childOb = !shallow && observe(newVal, false, mock);
             if (process.env.NODE_ENV !== 'production') {
                 dep.notify({
                     type: "set" /* TriggerOpTypes.SET */,
@@ -4415,16 +4409,20 @@ function set(target, key, val) {
         process.env.NODE_ENV !== 'production' && warn("Set operation on key \"".concat(key, "\" failed: target is readonly."));
         return;
     }
+    var ob = target.__ob__;
     if (isArray(target) && isValidArrayIndex(key)) {
         target.length = Math.max(target.length, key);
         target.splice(key, 1, val);
+        // when mocking for SSR, array methods are not hijacked
+        if (!ob.shallow && ob.mock) {
+            observe(val, false, true);
+        }
         return val;
     }
     if (key in target && !(key in Object.prototype)) {
         target[key] = val;
         return val;
     }
-    var ob = target.__ob__;
     if (target._isVue || (ob && ob.vmCount)) {
         process.env.NODE_ENV !== 'production' &&
             warn('Avoid adding reactive properties to a Vue instance or its root $data ' +
@@ -4435,7 +4433,7 @@ function set(target, key, val) {
         target[key] = val;
         return val;
     }
-    defineReactive(ob.value, key, val);
+    defineReactive(ob.value, key, val, undefined, ob.shallow, ob.mock);
     if (process.env.NODE_ENV !== 'production') {
         ob.dep.notify({
             type: "add" /* TriggerOpTypes.ADD */,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "packageManager": "pnpm@7.1.0",
   "description": "Reactive, component-oriented view layer for modern web interfaces.",
   "main": "dist/vue.runtime.common.js",
@@ -60,7 +60,7 @@
   },
   "homepage": "https://github.com/vuejs/vue#readme",
   "dependencies": {
-    "@vue/compiler-sfc": "2.7.2",
+    "@vue/compiler-sfc": "2.7.3",
     "csstype": "^3.1.0"
   },
   "devDependencies": {

package/packages/compiler-sfc/dist/compiler-sfc.js

@@ -3350,7 +3350,9 @@ const LIFECYCLE_HOOKS = [
     'activated',
     'deactivated',
     'errorCaptured',
-    'serverPrefetch'
+    'serverPrefetch',
+    'renderTracked',
+    'renderTriggered'
 ];
 
 var config = {
@@ -5189,6 +5191,13 @@ let shouldObserve = true;
 function toggleObserving(value) {
     shouldObserve = value;
 }
+// ssr mock dep
+const mockDep = {
+    notify: noop,
+    depend: noop,
+    addSub: noop,
+    removeSub: noop
+};
 /**
  * Observer class that is attached to each observed
  * object. Once attached, the observer converts the target
@@ -5196,76 +5205,60 @@ function toggleObserving(value) {
  * collect dependencies and dispatch updates.
  */
 class Observer {
-    constructor(value, shallow = false) {
+    constructor(value, shallow = false, mock = false) {
         this.value = value;
         this.shallow = shallow;
+        this.mock = mock;
         // this.value = value
-        this.dep = new Dep();
+        this.dep = mock ? mockDep : new Dep();
         this.vmCount = 0;
         def(value, '__ob__', this);
         if (isArray(value)) {
-            if (hasProto) {
-                protoAugment(value, arrayMethods);
-            }
-            else {
-                copyAugment(value, arrayMethods, arrayKeys);
+            if (!mock) {
+                if (hasProto) {
+                    value.__proto__ = arrayMethods;
+                    /* eslint-enable no-proto */
+                }
+                else {
+                    for (let i = 0, l = arrayKeys.length; i < l; i++) {
+                        const key = arrayKeys[i];
+                        def(value, key, arrayMethods[key]);
+                    }
+                }
             }
             if (!shallow) {
                 this.observeArray(value);
             }
         }
         else {
-            this.walk(value, shallow);
-        }
-    }
-    /**
-     * Walk through all properties and convert them into
-     * getter/setters. This method should only be called when
-     * value type is Object.
-     */
-    walk(obj, shallow) {
-        const keys = Object.keys(obj);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            defineReactive(obj, key, NO_INIITIAL_VALUE, undefined, shallow);
+            /**
+             * Walk through all properties and convert them into
+             * getter/setters. This method should only be called when
+             * value type is Object.
+             */
+            const keys = Object.keys(value);
+            for (let i = 0; i < keys.length; i++) {
+                const key = keys[i];
+                defineReactive(value, key, NO_INIITIAL_VALUE, undefined, shallow, mock);
+            }
         }
     }
     /**
      * Observe a list of Array items.
      */
-    observeArray(items) {
-        for (let i = 0, l = items.length; i < l; i++) {
-            observe(items[i]);
+    observeArray(value) {
+        for (let i = 0, l = value.length; i < l; i++) {
+            observe(value[i], false, this.mock);
         }
     }
 }
 // helpers
-/**
- * Augment a target Object or Array by intercepting
- * the prototype chain using __proto__
- */
-function protoAugment(target, src) {
-    /* eslint-disable no-proto */
-    target.__proto__ = src;
-    /* eslint-enable no-proto */
-}
-/**
- * Augment a target Object or Array by defining
- * hidden properties.
- */
-/* istanbul ignore next */
-function copyAugment(target, src, keys) {
-    for (let i = 0, l = keys.length; i < l; i++) {
-        const key = keys[i];
-        def(target, key, src[key]);
-    }
-}
 /**
  * Attempt to create an observer instance for a value,
  * returns the new observer if successfully observed,
  * or the existing observer if the value already has one.
  */
-function observe(value, shallow) {
+function observe(value, shallow, ssrMockReactivity) {
     if (!isObject$1(value) || isRef(value) || value instanceof VNode) {
         return;
     }
@@ -5274,18 +5267,18 @@ function observe(value, shallow) {
         ob = value.__ob__;
     }
     else if (shouldObserve &&
-        !isServerRendering() &&
+        (ssrMockReactivity || !isServerRendering()) &&
         (isArray(value) || isPlainObject(value)) &&
         Object.isExtensible(value) &&
-        !value.__v_skip) {
-        ob = new Observer(value, shallow);
+        !value.__v_skip /* ReactiveFlags.SKIP */) {
+        ob = new Observer(value, shallow, ssrMockReactivity);
     }
     return ob;
 }
 /**
  * Define a reactive property on an Object.
  */
-function defineReactive(obj, key, val, customSetter, shallow) {
+function defineReactive(obj, key, val, customSetter, shallow, mock) {
     const dep = new Dep();
     const property = Object.getOwnPropertyDescriptor(obj, key);
     if (property && property.configurable === false) {
@@ -5298,7 +5291,7 @@ function defineReactive(obj, key, val, customSetter, shallow) {
         (val === NO_INIITIAL_VALUE || arguments.length === 2)) {
         val = obj[key];
     }
-    let childOb = !shallow && observe(val);
+    let childOb = !shallow && observe(val, false, mock);
     Object.defineProperty(obj, key, {
         enumerable: true,
         configurable: true,
@@ -5346,7 +5339,7 @@ function defineReactive(obj, key, val, customSetter, shallow) {
             else {
                 val = newVal;
             }
-            childOb = !shallow && observe(newVal);
+            childOb = !shallow && observe(newVal, false, mock);
             if (process.env.NODE_ENV !== 'production') {
                 dep.notify({
                     type: "set" /* TriggerOpTypes.SET */,
@@ -5371,16 +5364,20 @@ function set(target, key, val) {
         process.env.NODE_ENV !== 'production' && warn$3(`Set operation on key "${key}" failed: target is readonly.`);
         return;
     }
+    const ob = target.__ob__;
     if (isArray(target) && isValidArrayIndex(key)) {
         target.length = Math.max(target.length, key);
         target.splice(key, 1, val);
+        // when mocking for SSR, array methods are not hijacked
+        if (!ob.shallow && ob.mock) {
+            observe(val, false, true);
+        }
         return val;
     }
     if (key in target && !(key in Object.prototype)) {
         target[key] = val;
         return val;
     }
-    const ob = target.__ob__;
     if (target._isVue || (ob && ob.vmCount)) {
         process.env.NODE_ENV !== 'production' &&
             warn$3('Avoid adding reactive properties to a Vue instance or its root $data ' +
@@ -5391,7 +5388,7 @@ function set(target, key, val) {
         target[key] = val;
         return val;
     }
-    defineReactive(ob.value, key, val);
+    defineReactive(ob.value, key, val, undefined, ob.shallow, ob.mock);
     if (process.env.NODE_ENV !== 'production') {
         ob.dep.notify({
             type: "add" /* TriggerOpTypes.ADD */,

package/packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "description": "compiler-sfc for Vue 2",
   "main": "dist/compiler-sfc.js",
   "types": "dist/compiler-sfc.d.ts",

package/src/core/observer/index.ts

@@ -13,7 +13,8 @@ import {
   isUndef,
   isValidArrayIndex,
   isServerRendering,
-  hasChanged
+  hasChanged,
+  noop
 } from '../util/index'
 import { isReadonly, isRef, TrackOpTypes, TriggerOpTypes } from '../../v3'
 
@@ -31,6 +32,14 @@ export function toggleObserving(value: boolean) {
   shouldObserve = value
 }
 
+// ssr mock dep
+const mockDep = {
+  notify: noop,
+  depend: noop,
+  addSub: noop,
+  removeSub: noop
+} as Dep
+
 /**
  * Observer class that is attached to each observed
  * object. Once attached, the observer converts the target
@@ -41,78 +50,63 @@ export class Observer {
   dep: Dep
   vmCount: number // number of vms that have this object as root $data
 
-  constructor(public value: any, public shallow = false) {
+  constructor(public value: any, public shallow = false, public mock = false) {
     // this.value = value
-    this.dep = new Dep()
+    this.dep = mock ? mockDep : new Dep()
     this.vmCount = 0
     def(value, '__ob__', this)
     if (isArray(value)) {
-      if (hasProto) {
-        protoAugment(value, arrayMethods)
-      } else {
-        copyAugment(value, arrayMethods, arrayKeys)
+      if (!mock) {
+        if (hasProto) {
+          /* eslint-disable no-proto */
+          ;(value as any).__proto__ = arrayMethods
+          /* eslint-enable no-proto */
+        } else {
+          for (let i = 0, l = arrayKeys.length; i < l; i++) {
+            const key = arrayKeys[i]
+            def(value, key, arrayMethods[key])
+          }
+        }
       }
       if (!shallow) {
         this.observeArray(value)
       }
     } else {
-      this.walk(value, shallow)
-    }
-  }
-
-  /**
-   * Walk through all properties and convert them into
-   * getter/setters. This method should only be called when
-   * value type is Object.
-   */
-  walk(obj: object, shallow: boolean) {
-    const keys = Object.keys(obj)
-    for (let i = 0; i < keys.length; i++) {
-      const key = keys[i]
-      defineReactive(obj, key, NO_INIITIAL_VALUE, undefined, shallow)
+      /**
+       * Walk through all properties and convert them into
+       * getter/setters. This method should only be called when
+       * value type is Object.
+       */
+      const keys = Object.keys(value)
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i]
+        defineReactive(value, key, NO_INIITIAL_VALUE, undefined, shallow, mock)
+      }
     }
   }
 
   /**
    * Observe a list of Array items.
    */
-  observeArray(items: Array<any>) {
-    for (let i = 0, l = items.length; i < l; i++) {
-      observe(items[i])
+  observeArray(value: any[]) {
+    for (let i = 0, l = value.length; i < l; i++) {
+      observe(value[i], false, this.mock)
     }
   }
 }
 
 // helpers
 
-/**
- * Augment a target Object or Array by intercepting
- * the prototype chain using __proto__
- */
-function protoAugment(target, src: Object) {
-  /* eslint-disable no-proto */
-  target.__proto__ = src
-  /* eslint-enable no-proto */
-}
-
-/**
- * Augment a target Object or Array by defining
- * hidden properties.
- */
-/* istanbul ignore next */
-function copyAugment(target: Object, src: Object, keys: Array<string>) {
-  for (let i = 0, l = keys.length; i < l; i++) {
-    const key = keys[i]
-    def(target, key, src[key])
-  }
-}
-
 /**
  * Attempt to create an observer instance for a value,
  * returns the new observer if successfully observed,
  * or the existing observer if the value already has one.
  */
-export function observe(value: any, shallow?: boolean): Observer | void {
+export function observe(
+  value: any,
+  shallow?: boolean,
+  ssrMockReactivity?: boolean
+): Observer | void {
   if (!isObject(value) || isRef(value) || value instanceof VNode) {
     return
   }
@@ -121,12 +115,12 @@ export function observe(value: any, shallow?: boolean): Observer | void {
     ob = value.__ob__
   } else if (
     shouldObserve &&
-    !isServerRendering() &&
+    (ssrMockReactivity || !isServerRendering()) &&
     (isArray(value) || isPlainObject(value)) &&
     Object.isExtensible(value) &&
-    !value.__v_skip
+    !value.__v_skip /* ReactiveFlags.SKIP */
   ) {
-    ob = new Observer(value, shallow)
+    ob = new Observer(value, shallow, ssrMockReactivity)
   }
   return ob
 }
@@ -139,7 +133,8 @@ export function defineReactive(
   key: string,
   val?: any,
   customSetter?: Function | null,
-  shallow?: boolean
+  shallow?: boolean,
+  mock?: boolean
 ) {
   const dep = new Dep()
 
@@ -158,7 +153,7 @@ export function defineReactive(
     val = obj[key]
   }
 
-  let childOb = !shallow && observe(val)
+  let childOb = !shallow && observe(val, false, mock)
   Object.defineProperty(obj, key, {
     enumerable: true,
     configurable: true,
@@ -202,7 +197,7 @@ export function defineReactive(
       } else {
         val = newVal
       }
-      childOb = !shallow && observe(newVal)
+      childOb = !shallow && observe(newVal, false, mock)
       if (__DEV__) {
         dep.notify({
           type: TriggerOpTypes.SET,
@@ -241,16 +236,20 @@ export function set(
     __DEV__ && warn(`Set operation on key "${key}" failed: target is readonly.`)
     return
   }
+  const ob = (target as any).__ob__
   if (isArray(target) && isValidArrayIndex(key)) {
     target.length = Math.max(target.length, key)
     target.splice(key, 1, val)
+    // when mocking for SSR, array methods are not hijacked
+    if (!ob.shallow && ob.mock) {
+      observe(val, false, true)
+    }
     return val
   }
   if (key in target && !(key in Object.prototype)) {
     target[key] = val
     return val
   }
-  const ob = (target as any).__ob__
   if ((target as any)._isVue || (ob && ob.vmCount)) {
     __DEV__ &&
       warn(
@@ -263,7 +262,7 @@ export function set(
     target[key] = val
     return val
   }
-  defineReactive(ob.value, key, val)
+  defineReactive(ob.value, key, val, undefined, ob.shallow, ob.mock)
   if (__DEV__) {
     ob.dep.notify({
       type: TriggerOpTypes.ADD,

package/src/shared/constants.ts

@@ -14,5 +14,7 @@ export const LIFECYCLE_HOOKS = [
   'activated',
   'deactivated',
   'errorCaptured',
-  'serverPrefetch'
+  'serverPrefetch',
+  'renderTracked',
+  'renderTriggered'
 ] as const