feat: new effectScope API

vuejs/core#2195

.eslintrc.js

@@ -42,6 +42,7 @@ const config = {
         '@typescript-eslint/no-unsafe-return': 'off',
         '@typescript-eslint/promise-function-async': 'off',
         '@typescript-eslint/prefer-nullish-coalescing': 'off',
+        '@typescript-eslint/prefer-optional-chain': 'off',
         '@typescript-eslint/ban-types': [
           'error',
           { extendDefaults: false, types },

packages/wechat/__tests__/component.spec.ts

@@ -192,7 +192,7 @@ describe('component', () => {
       }
     })
     component.lifetimes.attached.call(component)
-    expect(component.__effects__.length).toBe(3)
+    expect(component.__scope__.effects.length).toBe(3)
 
     component.increment()
     component.lifetimes.detached.call(component)
@@ -223,7 +223,7 @@ describe('component', () => {
     expect(dummy!).toBe(0)
     expect(component.data.count).toBe(0)
     // The other is `count` sync watcher
-    expect(component.__effects__.length).toBe(2)
+    expect(component.__scope__.effects.length).toBe(2)
 
     component.increment()
     await nextTick()
@@ -236,7 +236,7 @@ describe('component', () => {
     await nextTick()
     expect(dummy!).toBe(1)
     expect(component.data.count).toBe(2)
-    expect(component.__effects__.length).toBe(1)
+    expect(component.__scope__.effects.length).toBe(1)
   })
 
   it('props', async () => {

packages/wechat/__tests__/page.spec.ts

@@ -182,7 +182,7 @@ describe('page', () => {
       }
     })
     page.onLoad()
-    expect(page.__effects__.length).toBe(3)
+    expect(page.__scope__.effects.length).toBe(3)
 
     page.increment()
     page.onUnload()
@@ -213,7 +213,7 @@ describe('page', () => {
     expect(dummy!).toBe(0)
     expect(page.data.count).toBe(0)
     // The other is `count` sync watcher
-    expect(page.__effects__.length).toBe(2)
+    expect(page.__scope__.effects.length).toBe(2)
 
     page.increment()
     await nextTick()
@@ -226,7 +226,7 @@ describe('page', () => {
     await nextTick()
     expect(dummy!).toBe(1)
     expect(page.data.count).toBe(2)
-    expect(page.__effects__.length).toBe(1)
+    expect(page.__scope__.effects.length).toBe(1)
   })
 
   it('onLoad', () => {

packages/wechat/src/app.ts

@@ -1,4 +1,9 @@
-import { Bindings, AppInstance, setCurrentApp } from './instance'
+import {
+  Bindings,
+  AppInstance,
+  setCurrentApp,
+  unsetCurrentApp,
+} from './instance'
 import { isFunction, toHiddenField } from './utils'
 
 export type AppSetup = (
@@ -57,7 +62,7 @@ export function createApp(optionsOrSetup: any): void {
       })
     }
 
-    setCurrentApp(null)
+    unsetCurrentApp()
 
     if (originOnLaunch !== undefined) {
       originOnLaunch.call(this, options)

packages/wechat/src/component.ts

@@ -1,7 +1,12 @@
-import { shallowReactive, shallowReadonly } from '@vue/reactivity'
+import { shallowReactive, shallowReadonly, EffectScope } from '@vue/reactivity'
 import { PageLifecycle, Config } from './page'
 import { deepToRaw, deepWatch } from './shared'
-import { Bindings, ComponentInstance, setCurrentComponent } from './instance'
+import {
+  Bindings,
+  ComponentInstance,
+  setCurrentComponent,
+  unsetCurrentComponent,
+} from './instance'
 import { isFunction, toHiddenField } from './utils'
 
 export type ComponentContext = WechatMiniprogram.Component.InstanceProperties &
@@ -128,6 +133,8 @@ export function defineComponent(optionsOrSetup: any, config?: Config): string {
   options.lifetimes[ComponentLifecycle.ATTACHED] = function (
     this: ComponentInstance
   ) {
+    this.__scope__ = new EffectScope()
+
     setCurrentComponent(this)
     const rawProps: Record<string, any> = {}
     if (properties) {
@@ -174,7 +181,7 @@ export function defineComponent(optionsOrSetup: any, config?: Config): string {
       })
     }
 
-    setCurrentComponent(null)
+    unsetCurrentComponent()
 
     if (originAttached !== undefined) {
       originAttached.call(this)
@@ -190,11 +197,7 @@ export function defineComponent(optionsOrSetup: any, config?: Config): string {
   ) {
     detached.call(this)
 
-    if (this.__effects__) {
-      this.__effects__.forEach((effect) => {
-        effect.stop()
-      })
-    }
+    this.__scope__.stop()
   }
 
   const originReady =

packages/wechat/src/index.ts

@@ -2,6 +2,7 @@
 
 export {
   // Core
+  computed,
   reactive,
   ref,
   readonly,
@@ -22,8 +23,16 @@ export {
   shallowReadonly,
   markRaw,
   toRaw,
+  // Effect
+  effect,
+  stop,
+  ReactiveEffect,
+  // Effect scope
+  effectScope,
+  EffectScope,
+  getCurrentScope,
+  onScopeDispose,
 } from '@vue/reactivity'
-export { computed } from './computed'
 export { watch, watchEffect } from './watch'
 export { nextTick } from './scheduler'
 export { provide, inject } from './inject'
@@ -58,7 +67,6 @@ export {
 // Types -----------------------------------------------------------------------
 
 export {
-  ReactiveEffect,
   ReactiveEffectOptions,
   DebuggerEvent,
   TrackOpTypes,

packages/wechat/src/instance.ts

@@ -1,4 +1,4 @@
-import { ReactiveEffect } from '@vue/reactivity'
+import { EffectScope } from '@vue/reactivity'
 
 export type Bindings = Record<string, any> | void
 
@@ -11,7 +11,7 @@ export type PageInstance = WechatMiniprogram.Page.InstanceProperties &
     __isInjectedShareToTimelineHook__?: () => true
     __isInjectedFavoritesHook__?: () => true
     __listenPageScroll__?: () => true
-    __effects__?: ReactiveEffect[]
+    __scope__: EffectScope
   }
 
 export type ComponentInstance = WechatMiniprogram.Component.InstanceProperties &
@@ -21,7 +21,7 @@ export type ComponentInstance = WechatMiniprogram.Component.InstanceProperties &
     __isInjectedShareToTimelineHook__?: () => true
     __isInjectedFavoritesHook__?: () => true
     __listenPageScroll__?: () => true
-    __effects__?: ReactiveEffect[]
+    __scope__: EffectScope
     __props__: undefined | Record<string, any>
   }
 
@@ -35,14 +35,38 @@ export function getCurrentInstance(): PageInstance | ComponentInstance | null {
   return currentPage || currentComponent
 }
 
-export function setCurrentApp(page: AppInstance | null): void {
+export function setCurrentApp(page: AppInstance): void {
   currentApp = page
 }
 
-export function setCurrentPage(page: PageInstance | null): void {
+export function unsetCurrentApp(): void {
+  currentApp = null
+}
+
+export function setCurrentPage(page: PageInstance): void {
   currentPage = page
+  page.__scope__.on()
+}
+
+export function unsetCurrentPage(): void {
+  /* istanbul ignore else */
+  if (currentPage) {
+    currentPage.__scope__.off()
+  }
+
+  currentPage = null
 }
 
-export function setCurrentComponent(component: ComponentInstance | null): void {
+export function setCurrentComponent(component: ComponentInstance): void {
   currentComponent = component
+  component.__scope__.on()
+}
+
+export function unsetCurrentComponent(): void {
+  /* istanbul ignore else */
+  if (currentComponent) {
+    currentComponent.__scope__.off()
+  }
+
+  currentComponent = null
 }

packages/wechat/src/page.ts

@@ -1,4 +1,10 @@
-import { Bindings, PageInstance, setCurrentPage } from './instance'
+import { EffectScope } from '@vue/reactivity'
+import {
+  Bindings,
+  PageInstance,
+  setCurrentPage,
+  unsetCurrentPage,
+} from './instance'
 import { deepToRaw, deepWatch } from './shared'
 import { isFunction, toHiddenField } from './utils'
 
@@ -78,6 +84,8 @@ export function definePage(optionsOrSetup: any, config?: Config): void {
 
   const originOnLoad = options[PageLifecycle.ON_LOAD]
   options[PageLifecycle.ON_LOAD] = function (this: PageInstance, query: Query) {
+    this.__scope__ = new EffectScope()
+
     setCurrentPage(this)
     const context: PageContext = {
       is: this.is,
@@ -107,7 +115,7 @@ export function definePage(optionsOrSetup: any, config?: Config): void {
       })
     }
 
-    setCurrentPage(null)
+    unsetCurrentPage()
 
     if (originOnLoad !== undefined) {
       originOnLoad.call(this, query)
@@ -118,11 +126,7 @@ export function definePage(optionsOrSetup: any, config?: Config): void {
   options[PageLifecycle.ON_UNLOAD] = function (this: PageInstance) {
     onUnload.call(this)
 
-    if (this.__effects__) {
-      this.__effects__.forEach((effect) => {
-        effect.stop()
-      })
-    }
+    this.__scope__.stop()
   }
 
   if (options[PageLifecycle.ON_PAGE_SCROLL] || config.listenPageScroll) {

packages/wechat/src/watch.ts

@@ -9,7 +9,6 @@ import {
   EffectScheduler,
 } from '@vue/reactivity'
 import { queueJob, SchedulerJob } from './scheduler'
-import { recordInstanceBoundEffect } from './computed'
 import { getCurrentInstance } from './instance'
 import {
   isArray,
@@ -280,16 +279,16 @@ function doWatch(
     }
   }
 
-  const effect = new ReactiveEffect(getter, scheduler)
+  const instance = getCurrentInstance()
+  const scope = instance && instance.__scope__
+  const effect = new ReactiveEffect(getter, scheduler, scope)
 
   /* istanbul ignore else */
   if (__DEV__) {
     effect.onTrack = onTrack
     effect.onTrigger = onTrigger
   }
 
-  recordInstanceBoundEffect(effect)
-
   // Initial run
   if (cb) {
     if (immediate) {
@@ -301,11 +300,10 @@ function doWatch(
     effect.run()
   }
 
-  const instance = getCurrentInstance()
   return () => {
     effect.stop()
-    if (instance) {
-      remove(instance.__effects__!, effect)
+    if (scope) {
+      remove(scope.effects, effect)
     }
   }
 }