wip: effectScope

Author: yyx990803

src/core/instance/events.ts

@@ -56,7 +56,7 @@ export function updateComponentListeners(
   target = undefined
 }
 
-export function eventsMixin(Vue: Component) {
+export function eventsMixin(Vue: typeof Component) {
   const hookRE = /^hook:/
   Vue.prototype.$on = function (
     event: string | Array<string>,

src/core/instance/init.ts

@@ -9,10 +9,11 @@ import { initProvide, initInjections } from './inject'
 import { extend, mergeOptions, formatComponentName } from '../util/index'
 import type { Component } from 'typescript/component'
 import type { InternalComponentOptions } from 'typescript/options'
+import { EffectScope } from 'v3'
 
 let uid = 0
 
-export function initMixin(Vue: Component) {
+export function initMixin(Vue: typeof Component) {
   Vue.prototype._init = function (options?: Record<string, any>) {
     const vm: Component = this
     // a uid
@@ -31,6 +32,8 @@ export function initMixin(Vue: Component) {
     vm._isVue = true
     // avoid instances from being observed
     vm.__v_skip = true
+    // effect scope
+    vm._scope = new EffectScope(true /* detached */)
     // merge options
     if (options && options._isComponent) {
       // optimize internal component instantiation
@@ -96,7 +99,7 @@ export function initInternalComponent(
   }
 }
 
-export function resolveConstructorOptions(Ctor: Component) {
+export function resolveConstructorOptions(Ctor: typeof Component) {
   let options = Ctor.options
   if (Ctor.super) {
     const superOptions = resolveConstructorOptions(Ctor.super)
@@ -120,7 +123,9 @@ export function resolveConstructorOptions(Ctor: Component) {
   return options
 }
 
-function resolveModifiedOptions(Ctor: Component): Record<string, any> | null {
+function resolveModifiedOptions(
+  Ctor: typeof Component
+): Record<string, any> | null {
   let modified
   const latest = Ctor.options
   const sealed = Ctor.sealedOptions

src/core/instance/lifecycle.ts

@@ -57,7 +57,7 @@ export function initLifecycle(vm: Component) {
   vm._isBeingDestroyed = false
 }
 
-export function lifecycleMixin(Vue: Component) {
+export function lifecycleMixin(Vue: typeof Component) {
   Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
     const vm: Component = this
     const prevEl = vm.$el
@@ -108,14 +108,9 @@ export function lifecycleMixin(Vue: Component) {
     if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
       remove(parent.$children, vm)
     }
-    // teardown watchers
-    if (vm._watcher) {
-      vm._watcher.teardown()
-    }
-    let i = vm._watchers.length
-    while (i--) {
-      vm._watchers[i].teardown()
-    }
+    // teardown scope. this includes both the render watcher and other
+    // watchers created
+    vm._scope.stop()
     // remove reference from data ob
     // frozen object may not have observer.
     if (vm._data.__ob__) {

src/core/instance/render.ts

@@ -86,11 +86,11 @@ export function setCurrentRenderingInstance(vm: Component) {
   currentRenderingInstance = vm
 }
 
-export function renderMixin(Vue: Component) {
+export function renderMixin(Vue: typeof Component) {
   // install runtime convenience helpers
   installRenderHelpers(Vue.prototype)
 
-  Vue.prototype.$nextTick = function (fn: Function) {
+  Vue.prototype.$nextTick = function (fn: (...args: any[]) => any) {
     return nextTick(fn, this)
   }
 

src/core/instance/state.ts

@@ -29,7 +29,7 @@ import {
   invokeWithErrorHandling,
   isFunction
 } from '../util/index'
-import type { Component } from '../../../typescript/component'
+import type { Component } from 'typescript/component'
 
 const sharedPropertyDefinition = {
   enumerable: true,
@@ -49,7 +49,6 @@ export function proxy(target: Object, sourceKey: string, key: string) {
 }
 
 export function initState(vm: Component) {
-  vm._watchers = []
   const opts = vm.$options
   if (opts.props) initProps(vm, opts.props)
 
@@ -310,7 +309,7 @@ function initWatch(vm: Component, watch: Object) {
 
 function createWatcher(
   vm: Component,
-  expOrFn: string | Function,
+  expOrFn: string | (() => any),
   handler: any,
   options?: Object
 ) {
@@ -324,7 +323,7 @@ function createWatcher(
   return vm.$watch(expOrFn, handler, options)
 }
 
-export function stateMixin(Vue: Component) {
+export function stateMixin(Vue: typeof Component) {
   // flow somehow has problems with directly declared definition object
   // when using Object.defineProperty, so we have to procedurally build up
   // the object here.

src/core/observer/watcher.ts

@@ -16,6 +16,10 @@ import Dep, { pushTarget, popTarget, DepTarget } from './dep'
 
 import type { SimpleSet } from '../util/index'
 import type { Component } from 'typescript/component'
+import {
+  activeEffectScope,
+  recordEffectScope
+} from '../../v3/reactivity/effectScope'
 
 let uid = 0
 
@@ -59,11 +63,11 @@ export default class Watcher implements DepTarget {
     } | null,
     isRenderWatcher?: boolean
   ) {
+    recordEffectScope(this, activeEffectScope || (vm ? vm._scope : undefined))
     if ((this.vm = vm)) {
       if (isRenderWatcher) {
         vm._watcher = this
       }
-      vm._watchers.push(this)
     }
     // options
     if (options) {
@@ -237,13 +241,10 @@ export default class Watcher implements DepTarget {
    * Remove self from all dependencies' subscriber list.
    */
   teardown() {
+    if (this.vm && !this.vm._isBeingDestroyed) {
+      remove(this.vm._scope.effects, this)
+    }
     if (this.active) {
-      // remove self from vm's watcher list
-      // this is a somewhat expensive operation so we skip it
-      // if the vm is being destroyed.
-      if (this.vm && !this.vm._isBeingDestroyed) {
-        remove(this.vm._watchers, this)
-      }
       let i = this.deps.length
       while (i--) {
         this.deps[i].removeSub(this)

src/core/util/next-tick.ts

@@ -85,7 +85,9 @@ if (typeof Promise !== 'undefined' && isNative(Promise)) {
   }
 }
 
-export function nextTick(cb?: Function, ctx?: Object) {
+export function nextTick(): Promise<void>
+export function nextTick(cb: (...args: any[]) => any, ctx?: object): void
+export function nextTick(cb?: (...args: any[]) => any, ctx?: object) {
   let _resolve
   callbacks.push(() => {
     if (cb) {

src/core/vdom/create-component.ts

@@ -26,7 +26,10 @@ import type {
   VNodeWithData
 } from 'typescript/vnode'
 import type { Component } from 'typescript/component'
-import type { InternalComponentOptions } from 'typescript/options'
+import type {
+  ComponentOptions,
+  InternalComponentOptions
+} from 'typescript/options'
 
 // inline hooks to be invoked on component VNodes during patch
 const componentVNodeHooks = {
@@ -95,7 +98,7 @@ const componentVNodeHooks = {
 const hooksToMerge = Object.keys(componentVNodeHooks)
 
 export function createComponent(
-  Ctor: Component | Function | Object | void,
+  Ctor: typeof Component | Function | ComponentOptions | void,
   data: VNodeData | undefined,
   context: Component,
   children?: Array<VNode>,
@@ -109,7 +112,7 @@ export function createComponent(
 
   // plain options object: turn it into a constructor
   if (isObject(Ctor)) {
-    Ctor = baseCtor.extend(Ctor)
+    Ctor = baseCtor.extend(Ctor as typeof Component)
   }
 
   // if at this stage it's not a constructor or an async component factory,
@@ -139,7 +142,7 @@ export function createComponent(
 
   // resolve constructor options in case global mixins are applied after
   // component constructor creation
-  resolveConstructorOptions(Ctor as Component)
+  resolveConstructorOptions(Ctor as typeof Component)
 
   // transform component v-model data into props & events
   if (isDef(data.model)) {
@@ -155,7 +158,7 @@ export function createComponent(
   // @ts-expect-error
   if (isTrue(Ctor.options.functional)) {
     return createFunctionalComponent(
-      Ctor as Component,
+      Ctor as typeof Component,
       propsData,
       data,
       context,

src/core/vdom/create-element.ts

@@ -126,7 +126,7 @@ export function _createElement(
     }
   } else {
     // direct component options / constructor
-    vnode = createComponent(tag, data, context, children)
+    vnode = createComponent(tag as any, data, context, children)
   }
   if (isArray(vnode)) {
     return vnode

src/core/vdom/create-functional-component.ts

@@ -23,22 +23,21 @@ export function FunctionalRenderContext(
   props: Object,
   children: Array<VNode> | undefined,
   parent: Component,
-  Ctor: Component
+  Ctor: typeof Component
 ) {
   const options = Ctor.options
   // ensure the createElement function in functional components
   // gets a unique context - this is necessary for correct named slot check
   let contextVm
   if (hasOwn(parent, '_uid')) {
     contextVm = Object.create(parent)
-    // $flow-disable-line
     contextVm._original = parent
   } else {
     // the context vm passed in is a functional context as well.
     // in this case we want to make sure we are able to get a hold to the
     // real context instance.
     contextVm = parent
-    // $flow-disable-line
+    // @ts-ignore
     parent = parent._original
   }
   const isCompiled = isTrue(options._compiled)
@@ -94,7 +93,7 @@ export function FunctionalRenderContext(
 installRenderHelpers(FunctionalRenderContext.prototype)
 
 export function createFunctionalComponent(
-  Ctor: Component,
+  Ctor: typeof Component,
   propsData: Object | undefined,
   data: VNodeData,
   contextVm: Component,