From 539f6e64f2ffb13a91a78440bb70083cbd9c4fdf Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Tue, 16 Jan 2024 15:10:23 +0800
Subject: [PATCH] feat(composition api): watch

---
 .../reactivity/watch/watch.test.js            | 109 +++++++++++++++
 .../reactivity/watch/watch.uvue               | 131 +++++++++++++++++-
 pages/tab-bar/composition-api.uvue            |   2 +-
 3 files changed, 240 insertions(+), 2 deletions(-)
 create mode 100644 pages/composition-api/reactivity/watch/watch.test.js

diff --git a/pages/composition-api/reactivity/watch/watch.test.js b/pages/composition-api/reactivity/watch/watch.test.js
new file mode 100644
index 0000000..117c7c1
--- /dev/null
+++ b/pages/composition-api/reactivity/watch/watch.test.js
@@ -0,0 +1,109 @@
+const PAGE_PATH = '/pages/composition-api/reactivity/watch/watch'
+
+describe('watch', () => {
+  if (process.env.uniTestPlatformInfo.startsWith('android')) {
+    let page = null
+    beforeAll(async () => {
+      page = await program.reLaunch(PAGE_PATH)
+      await page.waitFor('view')
+    })
+    it('count', async () => {
+      const count = await page.$('#count')
+      expect(await count.text()).toBe('count: 0')
+      
+      // watch
+      const watchCountRes = await page.$('#watch-count-res')
+      expect(await watchCountRes.text()).toBe('watch count result: ')
+      
+      // track
+      const watchCountTrackNum = await page.$('#watch-count-track-num')
+      expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
+      
+      // trigger
+      const watchCountTriggerNum = await page.$('#watch-count-trigger-num')
+      expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 0')
+      const watchCountCleanupRes = await page.$('#watch-count-cleanup-res')
+      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: ')
+      
+      // watch count and obj.num
+      const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
+      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: ')
+
+      const incrementBtn = await page.$('#increment-btn')
+      await incrementBtn.tap()
+
+      expect(await count.text()).toBe('count: 1')
+      expect(await watchCountRes.text()).toBe('watch count result: count: 1, prevCount: 0, count ref text (flush sync): count: 0')
+      expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
+      expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 1')
+      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: ')
+      
+      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: state: [1,0], preState: [0,0]')
+      
+      await incrementBtn.tap()
+      
+      expect(await count.text()).toBe('count: 2')
+      expect(await watchCountRes.text()).toBe('watch count result: count: 2, prevCount: 1, count ref text (flush sync): count: 1')
+      expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
+      expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
+      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 1')
+      
+      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: state: [2,0], preState: [1,0]')
+      
+      // stop watch
+      const stopWatchCountBtn = await page.$('#stop-watch-count-btn')
+      await stopWatchCountBtn.tap()
+      
+      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
+      
+      await incrementBtn.tap()
+      
+      expect(await count.text()).toBe('count: 3')
+      expect(await watchCountRes.text()).toBe('watch count result: count: 2, prevCount: 1, count ref text (flush sync): count: 1')
+      expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
+      expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
+      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
+      
+      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: state: [3,0], preState: [2,0]')
+    })
+    it('obj', async () => {
+      const objStr = await page.$('#obj-str')
+      expect(await objStr.text()).toBe('obj.str: num: 0')
+      const objNum = await page.$('#obj-num')
+      expect(await objNum.text()).toBe('obj.num: 0')
+      const objBool = await page.$('#obj-bool')
+      expect(await objBool.text()).toBe('obj.bool: false')
+      const objArr = await page.$('#obj-arr')
+      expect(await objArr.text()).toBe('obj.arr: [0]')
+      
+      const watchObjRes = await page.$('#watch-obj-res')
+      expect(await watchObjRes.text()).toBe('watch obj result: obj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}, prevObj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}')
+      const watchObjStrRes = await page.$('#watch-obj-str-res')
+      expect(await watchObjStrRes.text()).toBe('watch obj.str result: ')
+      const watchObjBoolRes = await page.$('#watch-obj-bool-res')
+      expect(await watchObjBoolRes.text()).toBe('watch obj.bool result: ')
+      const watchObjArrRes = await page.$('#watch-obj-arr-res')
+      expect(await watchObjArrRes.text()).toBe('watch obj.arr result: ')
+      
+      const updateObjBtn = await page.$('#update-obj-btn')
+      await updateObjBtn.tap()
+      
+      expect(await objStr.text()).toBe('obj.str: num: 1')
+      expect(await objNum.text()).toBe('obj.num: 1')
+      expect(await objBool.text()).toBe('obj.bool: true')
+      expect(await objArr.text()).toBe('obj.arr: [0,1]')
+      
+      expect(await watchObjRes.text()).toBe('watch obj result: obj: {"arr":[0,1],"bool":true,"num":1,"str":"num: 1"}, prevObj: {"arr":[0,1],"bool":true,"num":1,"str":"num: 1"}')
+      expect(await watchObjStrRes.text()).toBe('watch obj.str result: str: num: 1, prevStr: num: 0, obj.str ref text (flush pre): obj.str: num: 0')
+      expect(await watchObjBoolRes.text()).toBe('watch obj.bool result: bool: true, prevBool: false, obj.bool ref text (flush post): obj.bool: true')
+      expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0,1], prevArr: [0,1]')
+      
+      const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
+      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: state: [3,1], preState: [3,0]')
+    })
+  } else {
+    it('other platform', () => {
+      expect(1).toBe(1)
+    })
+  }
+})
\ No newline at end of file
diff --git a/pages/composition-api/reactivity/watch/watch.uvue b/pages/composition-api/reactivity/watch/watch.uvue
index 0baf6d3..3fe587a 100644
--- a/pages/composition-api/reactivity/watch/watch.uvue
+++ b/pages/composition-api/reactivity/watch/watch.uvue
@@ -1 +1,130 @@
- <template><view class="page">watch</view></template>
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1; padding-bottom: 20px">
+  <!-- #endif -->
+    <view class="page">
+      <text id="count" ref="countRef" class="uni-common-mb">count: {{ count }}</text>
+      <text id="watch-count-res" class="uni-common-mb">watch count result: {{ watchCountRes }}</text>
+      <text id="watch-count-track-num" class="uni-common-mb">watch count track number: {{ watchCountTrackNum }}</text>
+      <text id="watch-count-trigger-num" class="uni-common-mb">watch count trigger number:
+        {{ watchCountTriggerNum }}</text>
+      <text id="watch-count-cleanup-res" class="uni-common-mb">watch count cleanup result:
+        {{ watchCountCleanupRes }}</text>
+      <button id="increment-btn" class="uni-common-mb" @click="increment">
+        increment
+      </button>
+      <button id="stop-watch-count-btn" class="uni-common-mb" @click="triggerStopWatchCount">
+        stop watch count
+      </button>
+      <text id="obj-str" ref="objStrRef" class="uni-common-mb">obj.str: {{ obj.str }}</text>
+      <text id="obj-num" class="uni-common-mb">obj.num: {{ obj.num }}</text>
+      <text id="obj-bool" ref="objBoolRef" class="uni-common-mb">obj.bool: {{ obj.bool }}</text>
+      <text id="obj-arr" ref="objArrRef" class="uni-common-mb">obj.arr: {{ obj.arr }}</text>
+      <text id="watch-obj-res" class="uni-common-mb">watch obj result: {{ watchObjRes }}</text>
+      <text id="watch-obj-str-res" class="uni-common-mb">watch obj.str result: {{ watchObjStrRes }}</text>
+      <text id="watch-obj-bool-res" class="uni-common-mb">watch obj.bool result: {{ watchObjBoolRes }}</text>
+      <text id="watch-obj-arr-res" class="uni-common-mb">watch obj.arr result: {{ watchObjArrRes }}</text>
+      <button id="update-obj-btn" class="uni-common-mb" @click="updateObj">
+        update obj
+      </button>
+      <text id="watch-count-obj-num-res" class="uni-common-mb">watch count and obj.num result:
+        {{ watchCountAndObjNumRes }}</text>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script setup>
+  type Obj = {
+    num : number,
+    str : string,
+    bool : boolean,
+    arr : number[]
+  }
+
+  const countRef = ref(null)
+  const count = ref(0)
+  const watchCountRes = ref('')
+  const watchCountCleanupRes = ref('')
+  const watchCountTrackNum = ref(0)
+  const watchCountTriggerNum = ref(0)
+
+  const stopWatchCount = watch(count, (count : number, prevCount : number, onCleanup : OnCleanup) => {
+    watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${(countRef.value as Element).getAttribute('value')}`
+    const cancel = () => {
+      watchCountCleanupRes.value = `watch count cleanup: ${count}`
+    }
+    onCleanup(cancel)
+  }, {
+    // 侦听器在响应式依赖改变时立即触发
+    flush: 'sync',
+    // 响应属性或引用作为依赖项被跟踪时调用
+    onTrack(event : DebuggerEvent) {
+      if (event.type === 'get') {
+        watchCountTrackNum.value++
+      }
+    },
+    // 侦听器回调被依赖项的变更触发时调用
+    onTrigger(event : DebuggerEvent) {
+      if (event.type === 'set') {
+        watchCountTriggerNum.value++
+      }
+    }
+  })
+
+  const triggerStopWatchCount = () => stopWatchCount()
+
+  const increment = () => {
+    count.value++
+  }
+
+  const obj = reactive({
+    num: 0,
+    str: 'num: 0',
+    bool: false,
+    arr: [0]
+  } as Obj)
+
+  // immediate: true 第一次触发, 旧值应该是 undefined, 现在 app 是初始值
+  const watchObjRes = ref('')
+  watch(obj, (obj : Obj, prevObj : Obj) => {
+    watchObjRes.value = `obj: ${JSON.stringify(obj)}, prevObj: ${JSON.stringify(prevObj)}`
+  }, { immediate: true })
+
+  const objStrRef = ref(null)
+  const watchObjStrRes = ref('')
+  watch(() : string => obj.str, (str : string, prevStr : string) => {
+    watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${(objStrRef.value as Element).getAttribute('value')}`
+  }, {
+    // 侦听器在组件渲染之前触发
+    flush: 'pre',
+  })
+
+  const objBoolRef = ref(null)
+  const watchObjBoolRes = ref('')
+  watch(() : boolean => obj.bool, (bool : boolean, prevBool : boolean) => {
+    watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${(objBoolRef.value as Element).getAttribute('value')}`
+  }, {
+    // 侦听器延迟到组件渲染之后触发
+    flush: 'post'
+  })
+
+
+  const watchObjArrRes = ref('')
+  watch(() : number[] => obj.arr, (arr : number[], prevArr : number[]) => {
+    watchObjArrRes.value = `arr: ${JSON.stringify(arr)}, prevArr: ${JSON.stringify(prevArr)}`
+  }, { deep: true })
+
+  const watchCountAndObjNumRes = ref('')
+  watch([count, () : number => obj.num], (state : number[], preState : number[]) => {
+    watchCountAndObjNumRes.value = `state: ${JSON.stringify(state)}, preState: ${JSON.stringify(preState)}`
+  })
+
+  const updateObj = () => {
+    obj.num++
+    obj.str = `num: ${obj.num}`
+    obj.bool = !obj.bool
+    obj.arr.push(obj.num)
+  }
+</script>
\ No newline at end of file
diff --git a/pages/tab-bar/composition-api.uvue b/pages/tab-bar/composition-api.uvue
index 35a1b32..c4b185a 100644
--- a/pages/tab-bar/composition-api.uvue
+++ b/pages/tab-bar/composition-api.uvue
@@ -106,7 +106,7 @@
           {
             name: 'watch',
             url: 'watch',
-            enable: false,
+            enable: true,
           },
           {
             name: 'watchEffect',
-- 
GitLab