vue 2.6.13 → 2.7.0-alpha.2

package/src/core/observer/{dep.js → dep.ts}

@@ -1,49 +1,71 @@
-/* @flow */
-
-import type Watcher from './watcher'
 import { remove } from '../util/index'
 import config from '../config'
+import { DebuggerOptions, DebuggerEventExtraInfo } from 'v3'
 
 let uid = 0
 
+/**
+ * @internal
+ */
+export interface DepTarget extends DebuggerOptions {
+  id: number
+  addDep(dep: Dep): void
+  update(): void
+}
+
 /**
  * A dep is an observable that can have multiple
  * directives subscribing to it.
+ * @internal
  */
 export default class Dep {
-  static target: ?Watcher;
-  id: number;
-  subs: Array<Watcher>;
+  static target?: DepTarget | null
+  id: number
+  subs: Array<DepTarget>
 
-  constructor () {
+  constructor() {
     this.id = uid++
     this.subs = []
   }
 
-  addSub (sub: Watcher) {
+  addSub(sub: DepTarget) {
     this.subs.push(sub)
   }
 
-  removeSub (sub: Watcher) {
+  removeSub(sub: DepTarget) {
     remove(this.subs, sub)
   }
 
-  depend () {
+  depend(info?: DebuggerEventExtraInfo) {
     if (Dep.target) {
       Dep.target.addDep(this)
+      if (__DEV__ && info && Dep.target.onTrack) {
+        Dep.target.onTrack({
+          effect: Dep.target,
+          ...info
+        })
+      }
     }
   }
 
-  notify () {
+  notify(info?: DebuggerEventExtraInfo) {
     // stabilize the subscriber list first
     const subs = this.subs.slice()
-    if (process.env.NODE_ENV !== 'production' && !config.async) {
+    if (__DEV__ && !config.async) {
       // subs aren't sorted in scheduler if not running async
       // we need to sort them now to make sure they fire in correct
       // order
       subs.sort((a, b) => a.id - b.id)
     }
     for (let i = 0, l = subs.length; i < l; i++) {
+      if (__DEV__ && info) {
+        const sub = subs[i]
+        sub.onTrigger &&
+          sub.onTrigger({
+            effect: subs[i],
+            ...info
+          })
+      }
       subs[i].update()
     }
   }
@@ -53,14 +75,14 @@ export default class Dep {
 // This is globally unique because only one watcher
 // can be evaluated at a time.
 Dep.target = null
-const targetStack = []
+const targetStack: Array<DepTarget | null | undefined> = []
 
-export function pushTarget (target: ?Watcher) {
+export function pushTarget(target?: DepTarget | null) {
   targetStack.push(target)
   Dep.target = target
 }
 
-export function popTarget () {
+export function popTarget() {
   targetStack.pop()
   Dep.target = targetStack[targetStack.length - 1]
 }

package/src/core/observer/{index.js → index.ts}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import Dep from './dep'
 import VNode from '../vdom/vnode'
 import { arrayMethods } from './array'
@@ -7,24 +5,29 @@ import {
   def,
   warn,
   hasOwn,
+  isArray,
   hasProto,
   isObject,
   isPlainObject,
   isPrimitive,
   isUndef,
   isValidArrayIndex,
-  isServerRendering
+  isServerRendering,
+  hasChanged
 } from '../util/index'
+import { isReadonly, isRef, TrackOpTypes, TriggerOpTypes } from '../../v3'
 
 const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
 
+const NO_INIITIAL_VALUE = {}
+
 /**
  * In some cases we may want to disable observation inside a component's
  * update computation.
  */
 export let shouldObserve: boolean = true
 
-export function toggleObserving (value: boolean) {
+export function toggleObserving(value: boolean) {
   shouldObserve = value
 }
 
@@ -35,24 +38,25 @@ export function toggleObserving (value: boolean) {
  * collect dependencies and dispatch updates.
  */
 export class Observer {
-  value: any;
-  dep: Dep;
-  vmCount: number; // number of vms that have this object as root $data
+  dep: Dep
+  vmCount: number // number of vms that have this object as root $data
 
-  constructor (value: any) {
-    this.value = value
+  constructor(public value: any, public shallow = false) {
+    // this.value = value
     this.dep = new Dep()
     this.vmCount = 0
     def(value, '__ob__', this)
-    if (Array.isArray(value)) {
+    if (isArray(value)) {
       if (hasProto) {
         protoAugment(value, arrayMethods)
       } else {
         copyAugment(value, arrayMethods, arrayKeys)
       }
-      this.observeArray(value)
+      if (!shallow) {
+        this.observeArray(value)
+      }
     } else {
-      this.walk(value)
+      this.walk(value, shallow)
     }
   }
 
@@ -61,17 +65,18 @@ export class Observer {
    * getter/setters. This method should only be called when
    * value type is Object.
    */
-  walk (obj: Object) {
+  walk(obj: object, shallow: boolean) {
     const keys = Object.keys(obj)
     for (let i = 0; i < keys.length; i++) {
-      defineReactive(obj, keys[i])
+      const key = keys[i]
+      defineReactive(obj, key, NO_INIITIAL_VALUE, undefined, shallow)
     }
   }
 
   /**
    * Observe a list of Array items.
    */
-  observeArray (items: Array<any>) {
+  observeArray(items: Array<any>) {
     for (let i = 0, l = items.length; i < l; i++) {
       observe(items[i])
     }
@@ -84,7 +89,7 @@ export class Observer {
  * Augment a target Object or Array by intercepting
  * the prototype chain using __proto__
  */
-function protoAugment (target, src: Object) {
+function protoAugment(target, src: Object) {
   /* eslint-disable no-proto */
   target.__proto__ = src
   /* eslint-enable no-proto */
@@ -95,7 +100,7 @@ function protoAugment (target, src: Object) {
  * hidden properties.
  */
 /* istanbul ignore next */
-function copyAugment (target: Object, src: Object, keys: Array<string>) {
+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])
@@ -107,8 +112,8 @@ function copyAugment (target: Object, src: Object, keys: Array<string>) {
  * returns the new observer if successfully observed,
  * or the existing observer if the value already has one.
  */
-export function observe (value: any, asRootData: ?boolean): Observer | void {
-  if (!isObject(value) || value instanceof VNode) {
+export function observe(value: any, shallow?: boolean): Observer | void {
+  if (!isObject(value) || isRef(value) || value instanceof VNode) {
     return
   }
   let ob: Observer | void
@@ -117,14 +122,11 @@ export function observe (value: any, asRootData: ?boolean): Observer | void {
   } else if (
     shouldObserve &&
     !isServerRendering() &&
-    (Array.isArray(value) || isPlainObject(value)) &&
+    (isArray(value) || isPlainObject(value)) &&
     Object.isExtensible(value) &&
-    !value._isVue
+    !value.__v_skip
   ) {
-    ob = new Observer(value)
-  }
-  if (asRootData && ob) {
-    ob.vmCount++
+    ob = new Observer(value, shallow)
   }
   return ob
 }
@@ -132,11 +134,11 @@ export function observe (value: any, asRootData: ?boolean): Observer | void {
 /**
  * Define a reactive property on an Object.
  */
-export function defineReactive (
-  obj: Object,
+export function defineReactive(
+  obj: object,
   key: string,
-  val: any,
-  customSetter?: ?Function,
+  val?: any,
+  customSetter?: Function | null,
   shallow?: boolean
 ) {
   const dep = new Dep()
@@ -149,7 +151,10 @@ export function defineReactive (
   // cater for pre-defined getter/setters
   const getter = property && property.get
   const setter = property && property.set
-  if ((!getter || setter) && arguments.length === 2) {
+  if (
+    (!getter || setter) &&
+    (val === NO_INIITIAL_VALUE || arguments.length === 2)
+  ) {
     val = obj[key]
   }
 
@@ -157,40 +162,62 @@ export function defineReactive (
   Object.defineProperty(obj, key, {
     enumerable: true,
     configurable: true,
-    get: function reactiveGetter () {
+    get: function reactiveGetter() {
       const value = getter ? getter.call(obj) : val
       if (Dep.target) {
-        dep.depend()
+        if (__DEV__) {
+          dep.depend({
+            target: obj,
+            type: TrackOpTypes.GET,
+            key
+          })
+        } else {
+          dep.depend()
+        }
         if (childOb) {
           childOb.dep.depend()
-          if (Array.isArray(value)) {
+          if (isArray(value)) {
             dependArray(value)
           }
         }
       }
-      return value
+      return isRef(value) ? value.value : value
     },
-    set: function reactiveSetter (newVal) {
+    set: function reactiveSetter(newVal) {
       const value = getter ? getter.call(obj) : val
-      /* eslint-disable no-self-compare */
-      if (newVal === value || (newVal !== newVal && value !== value)) {
+      if (!hasChanged(value, newVal)) {
         return
       }
-      /* eslint-enable no-self-compare */
-      if (process.env.NODE_ENV !== 'production' && customSetter) {
+      if (__DEV__ && customSetter) {
         customSetter()
       }
-      // #7981: for accessor properties without setter
-      if (getter && !setter) return
       if (setter) {
         setter.call(obj, newVal)
+      } else if (getter) {
+        // #7981: for accessor properties without setter
+        return
+      } else if (isRef(value) && !isRef(newVal)) {
+        value.value = newVal
+        return
       } else {
         val = newVal
       }
       childOb = !shallow && observe(newVal)
-      dep.notify()
+      if (__DEV__) {
+        dep.notify({
+          type: TriggerOpTypes.SET,
+          target: obj,
+          key,
+          newValue: newVal,
+          oldValue: value
+        })
+      } else {
+        dep.notify()
+      }
     }
   })
+
+  return dep
 }
 
 /**
@@ -198,13 +225,23 @@ export function defineReactive (
  * triggers change notification if the property doesn't
  * already exist.
  */
-export function set (target: Array<any> | Object, key: any, val: any): any {
-  if (process.env.NODE_ENV !== 'production' &&
-    (isUndef(target) || isPrimitive(target))
-  ) {
-    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
+export function set<T>(array: T[], key: number, value: T): T
+export function set<T>(object: object, key: string | number, value: T): T
+export function set(
+  target: any[] | Record<string, any>,
+  key: any,
+  val: any
+): any {
+  if (__DEV__ && (isUndef(target) || isPrimitive(target))) {
+    warn(
+      `Cannot set reactive property on undefined, null, or primitive value: ${target}`
+    )
+  }
+  if (isReadonly(target)) {
+    __DEV__ && warn(`Set operation on key "${key}" failed: target is readonly.`)
+    return
   }
-  if (Array.isArray(target) && isValidArrayIndex(key)) {
+  if (isArray(target) && isValidArrayIndex(key)) {
     target.length = Math.max(target.length, key)
     target.splice(key, 1, val)
     return val
@@ -213,12 +250,13 @@ export function set (target: Array<any> | Object, key: any, val: any): any {
     target[key] = val
     return val
   }
-  const ob = (target: any).__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 ' +
-      'at runtime - declare it upfront in the data option.'
-    )
+  const ob = (target as any).__ob__
+  if ((target as any)._isVue || (ob && ob.vmCount)) {
+    __DEV__ &&
+      warn(
+        'Avoid adding reactive properties to a Vue instance or its root $data ' +
+          'at runtime - declare it upfront in the data option.'
+      )
     return val
   }
   if (!ob) {
@@ -226,29 +264,47 @@ export function set (target: Array<any> | Object, key: any, val: any): any {
     return val
   }
   defineReactive(ob.value, key, val)
-  ob.dep.notify()
+  if (__DEV__) {
+    ob.dep.notify({
+      type: TriggerOpTypes.ADD,
+      target: target,
+      key,
+      newValue: val,
+      oldValue: undefined
+    })
+  } else {
+    ob.dep.notify()
+  }
   return val
 }
 
 /**
  * Delete a property and trigger change if necessary.
  */
-export function del (target: Array<any> | Object, key: any) {
-  if (process.env.NODE_ENV !== 'production' &&
-    (isUndef(target) || isPrimitive(target))
-  ) {
-    warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)
+export function del<T>(array: T[], key: number): void
+export function del(object: object, key: string | number): void
+export function del(target: any[] | object, key: any) {
+  if (__DEV__ && (isUndef(target) || isPrimitive(target))) {
+    warn(
+      `Cannot delete reactive property on undefined, null, or primitive value: ${target}`
+    )
   }
-  if (Array.isArray(target) && isValidArrayIndex(key)) {
+  if (isArray(target) && isValidArrayIndex(key)) {
     target.splice(key, 1)
     return
   }
-  const ob = (target: any).__ob__
-  if (target._isVue || (ob && ob.vmCount)) {
-    process.env.NODE_ENV !== 'production' && warn(
-      'Avoid deleting properties on a Vue instance or its root $data ' +
-      '- just set it to null.'
-    )
+  const ob = (target as any).__ob__
+  if ((target as any)._isVue || (ob && ob.vmCount)) {
+    __DEV__ &&
+      warn(
+        'Avoid deleting properties on a Vue instance or its root $data ' +
+          '- just set it to null.'
+      )
+    return
+  }
+  if (isReadonly(target)) {
+    __DEV__ &&
+      warn(`Delete operation on key "${key}" failed: target is readonly.`)
     return
   }
   if (!hasOwn(target, key)) {
@@ -258,18 +314,28 @@ export function del (target: Array<any> | Object, key: any) {
   if (!ob) {
     return
   }
-  ob.dep.notify()
+  if (__DEV__) {
+    ob.dep.notify({
+      type: TriggerOpTypes.DELETE,
+      target: target,
+      key
+    })
+  } else {
+    ob.dep.notify()
+  }
 }
 
 /**
  * Collect dependencies on array elements when the array is touched, since
  * we cannot intercept array element access like property getters.
  */
-function dependArray (value: Array<any>) {
+function dependArray(value: Array<any>) {
   for (let e, i = 0, l = value.length; i < l; i++) {
     e = value[i]
-    e && e.__ob__ && e.__ob__.dep.depend()
-    if (Array.isArray(e)) {
+    if (e && e.__ob__) {
+      e.__ob__.dep.depend()
+    }
+    if (isArray(e)) {
       dependArray(e)
     }
   }

package/src/core/observer/{scheduler.js → scheduler.ts}

@@ -1,22 +1,16 @@
-/* @flow */
-
 import type Watcher from './watcher'
 import config from '../config'
+import Dep from './dep'
 import { callHook, activateChildComponent } from '../instance/lifecycle'
 
-import {
-  warn,
-  nextTick,
-  devtools,
-  inBrowser,
-  isIE
-} from '../util/index'
+import { warn, nextTick, devtools, inBrowser, isIE } from '../util/index'
+import type { Component } from 'types/component'
 
 export const MAX_UPDATE_COUNT = 100
 
 const queue: Array<Watcher> = []
 const activatedChildren: Array<Component> = []
-let has: { [key: number]: ?true } = {}
+let has: { [key: number]: true | undefined | null } = {}
 let circular: { [key: number]: number } = {}
 let waiting = false
 let flushing = false
@@ -25,10 +19,10 @@ let index = 0
 /**
  * Reset the scheduler's state.
  */
-function resetSchedulerState () {
+function resetSchedulerState() {
   index = queue.length = activatedChildren.length = 0
   has = {}
-  if (process.env.NODE_ENV !== 'production') {
+  if (__DEV__) {
     circular = {}
   }
   waiting = flushing = false
@@ -68,7 +62,7 @@ if (inBrowser && !isIE) {
 /**
  * Flush both queues and run the watchers.
  */
-function flushSchedulerQueue () {
+function flushSchedulerQueue() {
   currentFlushTimestamp = getNow()
   flushing = true
   let watcher, id
@@ -94,15 +88,14 @@ function flushSchedulerQueue () {
     has[id] = null
     watcher.run()
     // in dev build, check and stop circular updates.
-    if (process.env.NODE_ENV !== 'production' && has[id] != null) {
+    if (__DEV__ && has[id] != null) {
       circular[id] = (circular[id] || 0) + 1
       if (circular[id] > MAX_UPDATE_COUNT) {
         warn(
-          'You may have an infinite update loop ' + (
-            watcher.user
+          'You may have an infinite update loop ' +
+            (watcher.user
               ? `in watcher with expression "${watcher.expression}"`
-              : `in a component render function.`
-          ),
+              : `in a component render function.`),
           watcher.vm
         )
         break
@@ -127,12 +120,12 @@ function flushSchedulerQueue () {
   }
 }
 
-function callUpdatedHooks (queue) {
+function callUpdatedHooks(queue: Watcher[]) {
   let i = queue.length
   while (i--) {
     const watcher = queue[i]
     const vm = watcher.vm
-    if (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {
+    if (vm && vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {
       callHook(vm, 'updated')
     }
   }
@@ -142,14 +135,14 @@ function callUpdatedHooks (queue) {
  * Queue a kept-alive component that was activated during patch.
  * The queue will be processed after the entire tree has been patched.
  */
-export function queueActivatedComponent (vm: Component) {
+export function queueActivatedComponent(vm: Component) {
   // setting _inactive to false here so that a render function can
   // rely on checking whether it's in an inactive tree (e.g. router-view)
   vm._inactive = false
   activatedChildren.push(vm)
 }
 
-function callActivatedHooks (queue) {
+function callActivatedHooks(queue) {
   for (let i = 0; i < queue.length; i++) {
     queue[i]._inactive = true
     activateChildComponent(queue[i], true /* true */)
@@ -161,30 +154,36 @@ function callActivatedHooks (queue) {
  * Jobs with duplicate IDs will be skipped unless it's
  * pushed when the queue is being flushed.
  */
-export function queueWatcher (watcher: Watcher) {
+export function queueWatcher(watcher: Watcher) {
   const id = watcher.id
-  if (has[id] == null) {
-    has[id] = true
-    if (!flushing) {
-      queue.push(watcher)
-    } else {
-      // if already flushing, splice the watcher based on its id
-      // if already past its id, it will be run next immediately.
-      let i = queue.length - 1
-      while (i > index && queue[i].id > watcher.id) {
-        i--
-      }
-      queue.splice(i + 1, 0, watcher)
+  if (has[id] != null) {
+    return
+  }
+
+  if (watcher === Dep.target && watcher.noRecurse) {
+    return
+  }
+
+  has[id] = true
+  if (!flushing) {
+    queue.push(watcher)
+  } else {
+    // if already flushing, splice the watcher based on its id
+    // if already past its id, it will be run next immediately.
+    let i = queue.length - 1
+    while (i > index && queue[i].id > watcher.id) {
+      i--
     }
-    // queue the flush
-    if (!waiting) {
-      waiting = true
+    queue.splice(i + 1, 0, watcher)
+  }
+  // queue the flush
+  if (!waiting) {
+    waiting = true
 
-      if (process.env.NODE_ENV !== 'production' && !config.async) {
-        flushSchedulerQueue()
-        return
-      }
-      nextTick(flushSchedulerQueue)
+    if (__DEV__ && !config.async) {
+      flushSchedulerQueue()
+      return
     }
+    nextTick(flushSchedulerQueue)
   }
 }

package/src/core/observer/{traverse.js → traverse.ts}

@@ -1,6 +1,4 @@
-/* @flow */
-
-import { _Set as Set, isObject } from '../util/index'
+import { _Set as Set, isObject, isArray } from '../util/index'
 import type { SimpleSet } from '../util/index'
 import VNode from '../vdom/vnode'
 
@@ -11,15 +9,20 @@ const seenObjects = new Set()
  * getters, so that every nested property inside the object
  * is collected as a "deep" dependency.
  */
-export function traverse (val: any) {
+export function traverse(val: any) {
   _traverse(val, seenObjects)
   seenObjects.clear()
+  return val
 }
 
-function _traverse (val: any, seen: SimpleSet) {
+function _traverse(val: any, seen: SimpleSet) {
   let i, keys
-  const isA = Array.isArray(val)
-  if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) {
+  const isA = isArray(val)
+  if (
+    (!isA && !isObject(val)) ||
+    Object.isFrozen(val) ||
+    val instanceof VNode
+  ) {
     return
   }
   if (val.__ob__) {