wip: apiWatch tests

Author: yyx990803

src/core/instance/lifecycle.ts

@@ -218,6 +218,12 @@ export function mountComponent(
   // manually mounted instance, call mounted on self
   // mounted is called for render-created child components in its inserted hook
   if (vm.$vnode == null) {
+    const preWatchers = vm._preWatchers
+    if (preWatchers) {
+      for (let i = 0; i < preWatchers.length; i++) {
+        preWatchers[i].run()
+      }
+    }
     vm._isMounted = true
     callHook(vm, 'mounted')
   }

src/core/observer/scheduler.ts

@@ -1,5 +1,6 @@
 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'
@@ -119,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')
     }
   }
@@ -155,28 +156,34 @@ function callActivatedHooks(queue) {
  */
 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 (__DEV__ && !config.async) {
-        flushSchedulerQueue()
-        return
-      }
-      nextTick(flushSchedulerQueue)
+    if (__DEV__ && !config.async) {
+      flushSchedulerQueue()
+      return
     }
+    nextTick(flushSchedulerQueue)
   }
 }

src/core/observer/traverse.ts

@@ -12,6 +12,7 @@ const seenObjects = new Set()
 export function traverse(val: any) {
   _traverse(val, seenObjects)
   seenObjects.clear()
+  return val
 }
 
 function _traverse(val: any, seen: SimpleSet) {

src/core/observer/watcher.ts

@@ -7,7 +7,6 @@ import {
   handleError,
   invokeWithErrorHandling,
   noop,
-  bind,
   isFunction
 } from '../util/index'
 
@@ -26,7 +25,7 @@ let uid = 0
  * This is used for both the $watch() api and directives.
  */
 export default class Watcher implements DepTarget {
-  vm: Component | null
+  vm?: Component | null
   expression: string
   cb: Function
   id: number
@@ -41,7 +40,8 @@ export default class Watcher implements DepTarget {
   depIds: SimpleSet
   newDepIds: SimpleSet
   before?: Function
-  scheduler?: Function
+  onStop?: Function
+  noRecurse?: boolean
   getter: Function
   value: any
 
@@ -72,10 +72,6 @@ export default class Watcher implements DepTarget {
       this.lazy = !!options.lazy
       this.sync = !!options.sync
       this.before = options.before
-      if ((this.scheduler = options.scheduler)) {
-        // @ts-ignore
-        this.run = bind(this.run, this)
-      }
     } else {
       this.deep = this.user = this.lazy = this.sync = false
     }
@@ -179,8 +175,6 @@ export default class Watcher implements DepTarget {
       this.dirty = true
     } else if (this.sync) {
       this.run()
-    } else if (this.scheduler) {
-      this.scheduler(this.run)
     } else {
       queueWatcher(this)
     }
@@ -255,6 +249,9 @@ export default class Watcher implements DepTarget {
         this.deps[i].removeSub(this)
       }
       this.active = false
+      if (this.onStop) {
+        this.onStop()
+      }
     }
   }
 }

src/v3/apiWatch.ts

@@ -7,18 +7,15 @@ import {
   isArray,
   isFunction,
   emptyObject,
-  remove,
   hasChanged,
   isServerRendering,
   invokeWithErrorHandling
 } from 'core/util'
 import { currentInstance } from './currentInstance'
 import { traverse } from 'core/observer/traverse'
-import {
-  EffectScheduler,
-  ReactiveEffect,
-  DebuggerEvent
-} from './reactivity/effect'
+import Watcher from '../core/observer/watcher'
+import { queueWatcher } from '../core/observer/scheduler'
+import { TrackOpTypes, TriggerOpTypes } from './reactivity/operations'
 
 const WATCHER = `watcher`
 const WATCHER_CB = `${WATCHER} callback`
@@ -58,6 +55,19 @@ export interface DebuggerOptions {
   onTrigger?: (event: DebuggerEvent) => void
 }
 
+export type DebuggerEvent = {
+  watcher: Watcher
+} & DebuggerEventExtraInfo
+
+export type DebuggerEventExtraInfo = {
+  target: object
+  type: TrackOpTypes | TriggerOpTypes
+  key: any
+  newValue?: any
+  oldValue?: any
+  oldTarget?: Map<any, any> | Set<any>
+}
+
 export interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {
   immediate?: Immediate
   deep?: boolean
@@ -162,7 +172,13 @@ export function watch<T = any, Immediate extends Readonly<boolean> = false>(
 function doWatch(
   source: WatchSource | WatchSource[] | WatchEffect | object,
   cb: WatchCallback | null,
-  { immediate, deep, flush, onTrack, onTrigger }: WatchOptions = emptyObject
+  {
+    immediate,
+    deep,
+    flush = 'pre',
+    onTrack,
+    onTrigger
+  }: WatchOptions = emptyObject
 ): WatchStopHandle {
   if (__DEV__ && !cb) {
     if (immediate !== undefined) {
@@ -200,7 +216,12 @@ function doWatch(
     getter = () => source.value
     forceTrigger = isShallow(source)
   } else if (isReactive(source)) {
-    getter = () => source
+    getter = isArray(source)
+      ? () => {
+          ;(source as any).__ob__.dep.depend()
+          return source
+        }
+      : () => source
     deep = true
   } else if (isArray(source)) {
     isMultiSource = true
@@ -245,7 +266,7 @@ function doWatch(
 
   let cleanup: () => void
   let onCleanup: OnCleanup = (fn: () => void) => {
-    cleanup = effect.onStop = () => {
+    cleanup = watcher.onStop = () => {
       call(fn, WATCHER_CLEANUP)
     }
   }
@@ -267,14 +288,23 @@ function doWatch(
     return noop
   }
 
+  const watcher = new Watcher(currentInstance, getter, noop, {
+    lazy: true
+  })
+  watcher.noRecurse = !cb
+
   let oldValue = isMultiSource ? [] : INITIAL_WATCHER_VALUE
-  const job = () => {
-    if (!effect.active) {
+  // overwrite default run
+  watcher.run = () => {
+    if (
+      !watcher.active &&
+      !(flush === 'pre' && instance && instance._isBeingDestroyed)
+    ) {
       return
     }
     if (cb) {
       // watch(source, cb)
-      const newValue = effect.run()
+      const newValue = watcher.get()
       if (
         deep ||
         forceTrigger ||
@@ -298,52 +328,51 @@ function doWatch(
       }
     } else {
       // watchEffect
-      effect.run()
+      watcher.get()
     }
   }
 
-  let scheduler: EffectScheduler
   if (flush === 'sync') {
-    scheduler = job as any // the scheduler function gets called directly
+    watcher.update = watcher.run
   } else if (flush === 'post') {
-    scheduler = () => queuePostRenderEffect(job)
+    watcher.id = Infinity
+    watcher.update = () => queueWatcher(watcher)
   } else {
-    // default: 'pre'
-    scheduler = () => queuePreFlushCb(job)
+    // pre
+    watcher.update = () => {
+      if (!instance || instance._isMounted) {
+        queueWatcher(watcher)
+      } else {
+        const buffer = instance._preWatchers || (instance._preWatchers = [])
+        if (buffer.indexOf(watcher) < 0) buffer.push(watcher)
+      }
+    }
   }
 
-  const effect = new ReactiveEffect(getter, scheduler)
-
-  if (__DEV__) {
-    effect.onTrack = onTrack
-    effect.onTrigger = onTrigger
-  }
+  // TODO
+  // if (__DEV__) {
+  //   effect.onTrack = onTrack
+  //   effect.onTrigger = onTrigger
+  // }
 
   // initial run
   if (cb) {
     if (immediate) {
-      job()
+      watcher.run()
     } else {
-      oldValue = effect.run()
+      oldValue = watcher.get()
     }
-  } else if (flush === 'post') {
-    queuePostRenderEffect(effect.run.bind(effect))
+  } else if (flush === 'post' && instance) {
+    instance.$once('hook:mounted', () => watcher.get())
   } else {
-    effect.run()
+    watcher.get()
   }
 
   return () => {
-    effect.stop()
-    if (instance && instance.scope) {
-      remove(instance.scope.effects!, effect)
-    }
+    watcher.teardown()
+    // TODO
+    // if (instance && instance.scope) {
+    //   remove(instance.scope.effects!, effect)
+    // }
   }
 }
-
-function queuePostRenderEffect(fn: Function) {
-  // TODO
-}
-
-function queuePreFlushCb(fn: Function) {
-  // TODO
-}

src/v3/index.ts

@@ -53,10 +53,10 @@ export {
   WatchCallback,
   WatchSource,
   WatchStopHandle,
-  DebuggerOptions
+  DebuggerOptions,
+  DebuggerEvent
 } from './apiWatch'
 
-export { DebuggerEvent } from './reactivity/effect'
 export { TrackOpTypes, TriggerOpTypes } from './reactivity/operations'
 
 export { h } from './h'