feat: add watch utils

Author: boquanfu

README.md

@@ -6,9 +6,10 @@
 
 注意： 4.0.0 大版本变更了最基本的接口名，从低版本升级到 4.0.0 以上时请注意 [#60](https://github.com/wechat-miniprogram/computed/issues/60) 的问题。
 
+
 ## 使用方法
 
-### 方式一 代码片段
+### 快速体验
 
 需要小程序基础库版本 >= 2.11.0 的环境。
 
@@ -20,22 +21,6 @@
 npm install --save miniprogram-computed
 ```
 
-### 方式二 本地构建
-
-将本仓库 clone 到本地，进入根目录安装 npm 依赖。
-
-```shell
-npm install
-```
-
-安装完成后执行
-
-```shell
-npm run dev // 构建 dev 版本
-```
-
-构建完毕后，根目录下的 `demo` 即为小程序代码根目录，可以将此 demo 导入开发者工具中进行体验。
-
 ### computed 基本用法
 
 ```js
@@ -188,6 +173,17 @@ ComponentWithComputed({
 
 针对此问题，推荐使用 `ComponentWithComputed` 构造器代替 `Component` 构造器。
 
+### 其他 API
+
+有一些辅助 API 用于控制 `watch` 时的一些行为表现。可以在 `this` 上访问到这些方法；使用 Chaining API 时， `watch()` 的返回值会带有这些方法。
+
+| 方法名 | 参数示例 | 说明 |
+| ---- | ---- | ---- |
+| disableWatches | disableWatches() | 暂时禁用 watch |
+| enableWatches | enableWatches(triggerNow) | 启用 watch ，如果 `triggerNow` 为真，立刻触发所有 watch |
+| triggerAllWatches | triggerAllWatches() | 立刻触发所有 watch 一次 |
+
+
 ## 常见问题说明
 
 ### 我应该使用 computed 还是 watch ？

UPDATE.md

@@ -46,3 +46,7 @@
 ## 6.0.0
 
 - 更新到 miniprogram-api-typing v4
+
+## 7.0.0
+
+- 新增一些 watch 辅助接口

package.json

@@ -1,6 +1,6 @@
 {
   "name": "miniprogram-computed",
-  "version": "6.0.2",
+  "version": "7.0.0",
   "description": "Computed & watch - wechat miniprogram custom component extend behavior",
   "main": "dist/index.js",
   "types": "types/index.d.ts",

src/behavior.ts

@@ -28,12 +28,15 @@ interface ComputedWatchInfo {
   computedUpdaters: Array<(...args: unknown[]) => boolean>
   computedRelatedPathValues: Array<Array<dataTracer.RelatedPathValue>>
   watchCurVal: Array<unknown>
-  _triggerFromComputedAttached: Record<string, boolean>
+  watchDisabled: boolean
 }
 
 enum ComputedWatchInitStatus {
   CREATED,
   ATTACHED,
+  DISABLE_WATCHES,
+  ENABLE_WATCHES,
+  CALL_WATCHES,
 }
 
 let computedWatchDefIdInc = 0
@@ -53,22 +56,24 @@ class ComputedBuilder {
   private computedWatchDefId = computedWatchDefIdInc++
   private computedList: Array<[string, (data: Record<string, unknown>) => unknown]> = []
   private watchList: Array<DataPathWithOptions[]> = []
+  private watchFunctions: Array<(...args: any[]) => void> = []
 
   constructor() {
     const computedWatchDefId = this.computedWatchDefId
     const computedList = this.computedList
     const watchList = this.watchList
+    const watchFunctions = this.watchFunctions
     this.observersItems.push({
       fields: '_computedWatchInit',
       observer(this: BehaviorExtend) {
         const status = this.data._computedWatchInit
         if (status === ComputedWatchInitStatus.CREATED) {
           // init data fields
-          const computedWatchInfo = {
+          const computedWatchInfo: ComputedWatchInfo = {
             computedUpdaters: [],
             computedRelatedPathValues: new Array(computedList.length),
             watchCurVal: new Array(watchList.length),
-            _triggerFromComputedAttached: Object.create(null),
+            watchDisabled: false,
           }
           if (!this._computedWatchInfo) this._computedWatchInfo = {}
           this._computedWatchInfo[computedWatchDefId] = computedWatchInfo
@@ -95,7 +100,6 @@ class ComputedBuilder {
             this.setData({
               [targetField]: dataTracer.unwrap(val),
             })
-            computedWatchInfo._triggerFromComputedAttached[targetField] = true
             computedWatchInfo.computedRelatedPathValues[index] = relatedPathValuesOnDef
 
             // will be invoked when setData is called
@@ -140,6 +144,14 @@ class ComputedBuilder {
             }
             computedWatchInfo.computedUpdaters.push(updateValueAndRelatedPaths)
           })
+        } else if (status === ComputedWatchInitStatus.DISABLE_WATCHES) {
+          const computedWatchInfo = this._computedWatchInfo[computedWatchDefId]
+          computedWatchInfo.watchDisabled = true
+        } else if (status === ComputedWatchInitStatus.ENABLE_WATCHES) {
+          const computedWatchInfo = this._computedWatchInfo[computedWatchDefId]
+          computedWatchInfo.watchDisabled = false
+        } else if (status === ComputedWatchInitStatus.CALL_WATCHES) {
+          watchFunctions.forEach((func) => func.call(this))
         }
       },
     })
@@ -170,32 +182,20 @@ class ComputedBuilder {
   }
 
   addWatch(watchPath: string, listener: (args: any) => void) {
+    const computedWatchDefId = this.computedWatchDefId
     const paths = dataPath.parseMultiDataPaths(watchPath)
     const index = this.watchList.length
     this.watchList.push(paths)
-    const computedWatchDefId = this.computedWatchDefId
+    this.watchFunctions.push(function (this: BehaviorExtend) {
+      const args = paths.map(({ path }) => dataPath.getDataOnPath(this.data, path))
+      listener.apply(this, args)
+    })
     this.observersItems.push({
       fields: watchPath,
       observer(this: BehaviorExtend) {
         if (!this._computedWatchInfo) return
         const computedWatchInfo = this._computedWatchInfo[computedWatchDefId]
         if (!computedWatchInfo) return
-        // (issue #58) ignore watch func when trigger by computed attached
-        if (Object.keys(computedWatchInfo._triggerFromComputedAttached).length) {
-          const pathsMap: Record<string, boolean> = {}
-          paths.forEach((path) => (pathsMap[path.path[0]] = true))
-          for (const computedVal in computedWatchInfo._triggerFromComputedAttached) {
-            if (computedWatchInfo._triggerFromComputedAttached[computedVal]) {
-              if (
-                pathsMap[computedVal] &&
-                computedWatchInfo._triggerFromComputedAttached[computedVal]
-              ) {
-                computedWatchInfo._triggerFromComputedAttached[computedVal] = false
-                return
-              }
-            }
-          }
-        }
         const oldVal = computedWatchInfo.watchCurVal[index]
 
         // get new watching field value
@@ -207,6 +207,7 @@ class ComputedBuilder {
           options.deepCmp ? deepClone(val) : val,
         )
         computedWatchInfo.watchCurVal[index] = curVal
+        if (computedWatchInfo.watchDisabled) return
 
         // compare
         let changed = false
@@ -245,6 +246,29 @@ export const behavior = Behavior({
     },
   },
 
+  methods: {
+    disableWatches() {
+      this.setData({
+        _computedWatchInit: ComputedWatchInitStatus.DISABLE_WATCHES,
+      })
+    },
+    enableWatches(callWatchesImmediately: boolean) {
+      this.setData({
+        _computedWatchInit: ComputedWatchInitStatus.ENABLE_WATCHES,
+      })
+      if (callWatchesImmediately) {
+        this.setData({
+          _computedWatchInit: ComputedWatchInitStatus.CALL_WATCHES,
+        })
+      }
+    },
+    triggerAllWatches() {
+      this.setData({
+        _computedWatchInit: ComputedWatchInitStatus.CALL_WATCHES,
+      })
+    },
+  },
+
   definitionFilter(defFields: any & BehaviorExtend) {
     const computedDef = defFields.computed
     const watchDef = defFields.watch
@@ -473,6 +497,29 @@ export function computed<
   return ctx.data as any
 }
 
+export const generateWatches = (self: BehaviorExtend) => ({
+  disableWatches() {
+    self.setData({
+      _computedWatchInit: ComputedWatchInitStatus.DISABLE_WATCHES,
+    })
+  },
+  enableWatches(triggerWatchesImmediately: boolean) {
+    self.setData({
+      _computedWatchInit: ComputedWatchInitStatus.ENABLE_WATCHES,
+    })
+    if (triggerWatchesImmediately) {
+      self.setData({
+        _computedWatchInit: ComputedWatchInitStatus.CALL_WATCHES,
+      })
+    }
+  },
+  triggerAllWatches() {
+    self.setData({
+      _computedWatchInit: ComputedWatchInitStatus.CALL_WATCHES,
+    })
+  },
+})
+
 export const watch = (
   ctx: adapter.builder.BuilderContext<any, any, any>,
   watchPath: string,
@@ -484,4 +531,5 @@ export const watch = (
   builder.observersItems.forEach(({ fields, observer }) => {
     ctx.observer(fields as any, observer)
   })
+  return generateWatches(ctx.self)
 }

test/env.d.ts

@@ -7,7 +7,7 @@ export const renderComponent: (
     Component: adapter.ComponentConstructor,
     env: { Behavior: adapter.BehaviorConstructor, Page: adapter.PageConstructor },
   ) => void,
-) => adapter.glassEasel.GeneralComponent
+) => adapter.component.GeneralComponent
 
 export const defineComponent: (
   path: string | undefined,
@@ -16,4 +16,4 @@ export const defineComponent: (
     Component: adapter.ComponentConstructor,
     env: { Behavior: adapter.BehaviorConstructor },
   ) => void,
-) => adapter.glassEasel.GeneralComponent
+) => void

test/index.test.ts

@@ -895,7 +895,7 @@ describe('computed behavior', () => {
     expect(c2TriggerCount).toBe(2)
   })
 
-  test('ignore watch func when trigger by computed attached', () => {
+  test('call watch func when trigger by computed attached', () => {
     let cTriggerCount = 0
     let dTriggerCount = 0
     const behA = BehaviorWithComputed({
@@ -939,8 +939,116 @@ describe('computed behavior', () => {
       } as any)
     }) as any
     expect(innerHTML(component)).toBe('<view>40</view>')
+    expect(cTriggerCount).toBe(2)
+    expect(dTriggerCount).toBe(1)
+  })
+
+  test('disable and enable watches', () => {
+    let cTriggerCount = 0
+    const component = renderComponent(undefined, '<view>{{c}}</view>', (Component) => {
+      Component({
+        behaviors: [computedBehavior],
+        data: {
+          c: 1,
+        },
+        watch: {
+          c() {
+            cTriggerCount += 1
+          },
+        },
+        created() {
+          this.disableWatches()
+        },
+        methods: {
+          set(n: number) {
+            this.setData({
+              c: n,
+            })
+          },
+          enable(b: boolean) {
+            this.enableWatches(b)
+          },
+          disable() {
+            this.disableWatches()
+          },
+          trigger() {
+            this.triggerAllWatches()
+          },
+        },
+      } as any)
+    }) as any
+    component.set(2)
+    expect(cTriggerCount).toBe(0)
+    component.enable(false)
+    expect(cTriggerCount).toBe(0)
+    component.set(2)
+    expect(cTriggerCount).toBe(0)
+    component.disable()
+    component.trigger()
+    expect(cTriggerCount).toBe(1)
+    component.enable(true)
+    expect(cTriggerCount).toBe(2)
+    component.set(3)
+    expect(cTriggerCount).toBe(3)
+    component.trigger()
+    expect(cTriggerCount).toBe(4)
+  })
+
+  test('disable and enable watches with chaining API', () => {
+    let cTriggerCount = 0
+    interface Watcher {
+      set(n: number): void
+      enable(b: boolean): void
+      disable(): void
+      trigger(): void
+    }
+    const watcherTrait = Behavior.trait<Watcher>()
+    const comp = renderComponent(undefined, '<view>{{c}}</view>', (Component) => {
+      Component()
+        .data(() => ({
+          c: 1,
+        }))
+        .init((ctx) => {
+          const { setData, implement, lifetime } = ctx
+          const watcher = watch(ctx, 'c', () => cTriggerCount += 1)
+          lifetime('created', () => {
+            watcher.disableWatches()
+          })
+          implement(watcherTrait, {
+            set(n: number) {
+              setData({
+                c: n,
+              })
+            },
+            enable(b: boolean) {
+              watcher.enableWatches(b)
+            },
+            disable() {
+              watcher.disableWatches()
+            },
+            trigger() {
+              watcher.triggerAllWatches()
+            },
+          })
+        })
+        .register()
+    })
+    const component = comp.traitBehavior(watcherTrait)!
+    component.set(2)
+    expect(cTriggerCount).toBe(0)
+    component.enable(false)
+    expect(cTriggerCount).toBe(0)
+    component.set(2)
+    expect(cTriggerCount).toBe(0)
+    component.disable()
+    component.trigger()
     expect(cTriggerCount).toBe(1)
-    expect(dTriggerCount).toBe(0)
+    component.enable(true)
+    expect(cTriggerCount).toBe(2)
+    component.set(3)
+    expect(cTriggerCount).toBe(3)
+    component.trigger()
+    expect(cTriggerCount).toBe(4)
   })
 
   test('computed Array', () => {