watch-function: 增加复杂情况

pages/component-instance/watch-function/child.uvue

@@ -27,7 +27,7 @@
         val: "init",
         changed: false,
         immediateValue: 'value',
-        immediateChanged: false,
+        immediateChanged: false
       }
     },
     mounted() {
@@ -43,7 +43,7 @@
         this.val = 'changed'
       },
       createImmediateWatch() {
-        this.$watch('immediateWatchValue', () => {
+        this.$watch('immediateValue', () => {
           this.immediateChanged = !this.immediateChanged
         }, {
           immediate: true

pages/component-instance/watch-function/watch-function.test.js

@@ -8,27 +8,67 @@ describe('$watch()', () => {
   })
 
   it('$watch() 生效', async () => {
-    const initValue = (await page.$('.init-value')).text()
-    const value = await (await page.data()).val
-    const isChange = await (await page.data()).changed
+    // 验证立即触发
+    const value4_new = await page.$('.value-4-n')
+    const value4_old = await page.$('.value-4-o')
+    expect(await value4_new.text()).toBe('6')
+    expect(await value4_old.text()).toBe('6')
 
-    expect(value).not.toBe(initValue)
-    expect(isChange).toBe(true)
+    const btn = await page.$('.btn-click')
 
-    const isChange2 = await (await page.data()).immediateChanged
-    expect(isChange2).toBe(true)
+    // 改变 10 次
+    for (let i = 1; i < 10; i++) {
+      await btn.tap()
+      await page.waitFor(50)
+      await clickCount(page, i)
+    }
   })
 
   it('子组件 $watch() 生效', async () => {
-    const initValue = (await page.$('.child-init-value')).text()
+    const initValue = await page.$('.child-init-value')
     const comp = await page.$('.watch-child')
     const value = await (await comp.data()).val
     const isChange = await (await comp.data()).changed
 
-    expect(value).not.toBe(initValue)
+    expect(value).not.toBe('init')
     expect(isChange).toBe(true)
 
     const isChange2 = await (await comp.data()).immediateChanged
     expect(isChange2).toBe(true)
   })
-})
\ No newline at end of file
+})
+
+async function clickCount(page, count) {
+  // 验证数据
+  const data = await page.data()
+  const data_a = data.a
+  const data_b = data.b
+  const data_d = data.c.d
+  const data_e = data.e
+  const data_f = data.f
+  expect(data_a).toBe(1 + count)
+  expect(data_b).toBe(2 + count)
+  expect(data_d).toBe(4 + count)
+  expect(data_e).toBe(5 + count)
+  expect(data_f).toBe(6 + count)
+
+  // 验证界面
+  const value1_new = await page.$('.value-1-n')
+  const value1_old = await page.$('.value-1-o')
+  const value2_new = await page.$('.value-2-n')
+  const value2_old = await page.$('.value-2-o')
+  const value3_new = await page.$('.value-3-n')
+  const value3_old = await page.$('.value-3-o')
+  const value4_new = await page.$('.value-4-n')
+  const value4_old = await page.$('.value-4-o')
+  const new_count = count
+  const old_count = count - 1
+  expect(await value1_new.text()).toBe(1 + new_count + '')
+  expect(await value1_old.text()).toBe(1 + old_count + '')
+  expect(await value2_new.text()).toBe(4 + new_count + '')
+  expect(await value2_old.text()).toBe(4 + old_count + '')
+  expect(await value3_new.text()).toBe(1 + new_count + 2 + new_count + '')
+  expect(await value3_old.text()).toBe(1 + old_count + 2 + old_count + '')
+  expect(await value4_new.text()).toBe(6 + new_count + '')
+  expect(await value4_old.text()).toBe(6 + old_count + '')
+}
\ No newline at end of file

pages/component-instance/watch-function/watch-function.uvue

 <template>
   <view class="page">
-    <view class="row">
-      <text>初始值</text>
-      <text class="child-init-value">init</text>
-    </view>
-    <view class="row">
-      <text>val</text>
-      <text>{{ val }}</text>
-    </view>
-    <view class="row">
-      <text>值是否变化</text>
-      <text>{{ changed }}</text>
-    </view>
-    <view class="row">
-      <text>immediate=true 值应为 true</text>
-      <text>{{ immediateChanged }}</text>
+    <button class="btn-click" type="default" @click="click">Click</button>
+    <view>
+      <view class="value-item">
+        <text class="value-item-k">a</text>
+        <text class="value-item-v value-1-n">{{v1New}}</text>
+        <text class="value-item-v value-1-o">{{v1Old}}</text>
+      </view>
+      <view class="value-item">
+        <text class="value-item-k">c.d</text>
+        <text class="value-item-v value-2-n">{{v2New}}</text>
+        <text class="value-item-v value-2-o">{{v2Old}}</text>
+      </view>
+      <view class="value-item">
+        <text class="value-item-k">a+b</text>
+        <text class="value-item-v value-3-n">{{v3New}}</text>
+        <text class="value-item-v value-3-o">{{v3Old}}</text>
+      </view>
+      <view class="value-item">
+        <text class="value-item-k">f</text>
+        <text class="value-item-v value-4-n">{{v4New}}</text>
+        <text class="value-item-v value-4-o">{{v4Old}}</text>
+      </view>
     </view>
     <watch-child class="watch-child"></watch-child>
   </view>
@@ -22,58 +29,80 @@
 
 <script>
   import child from './child.uvue'
-
+  type C = {
+    d : number
+  }
   export default {
     components: {
       watchChild: child
     },
     data() {
       return {
-        val: "init",
-        changed: false,
-        immediateValue: 'value',
-        immediateChanged: false,
-        // a: 'a',
-        // b: 'b',
-        // abChanged: false
+        a: 1,
+        b: 2,
+        c: {
+          d: 4
+        } as C,
+        e: 5,
+        f: 6,
+        v1New: 0,
+        v1Old: 0,
+        v2New: 0,
+        v2Old: 0,
+        v3New: 0,
+        v3Old: 0,
+        v4New: 0,
+        v4Old: 0,
       }
     },
     mounted() {
-      this.createWatch()
-      this.createImmediateWatch()
-      // this.createGetterWatch()
+      this.$watch('a', (newVal, oldVal) => {
+        this.v1New = newVal
+        this.v1Old = oldVal
+      })
+      this.$watch('c.d', (newVal : number, oldVal : number) => {
+        this.v2New = newVal
+        this.v2Old = oldVal
+      })
+      this.$watch(() : number => this.a + this.b, (newVal : number, oldVal : number) => {
+        this.v3New = newVal
+        this.v3Old = oldVal
+      })
+      this.$watch('f', (newVal, oldVal) => {
+        this.v4New = newVal
+        this.v4Old = oldVal
+      }, { immediate: true })
     },
     methods: {
-      createWatch() {
-        this.$watch('val', () => {
-          this.changed = !this.changed
-        })
-
-        this.val = 'changed'
-      },
-      createImmediateWatch() {
-        this.$watch('immediateWatchValue', () => {
-          this.immediateChanged = !this.immediateChanged
-        }, {
-          immediate: true
-        })
-      },
-      // createGetterWatch () {
-      //   this.$watch(() => this.a + this.b, () => {
-      //     this.abChanged = !this.abChanged
-      //   })
-      //
-      //   this.a = 'changed'
-      // }
+      click() {
+        this.a++
+        this.b++
+        this.c.d++
+        this.e++
+        this.f++
+      }
     }
   }
 </script>
 
 <style>
-  .row {
-    display: flex;
+  .value {
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .value-item {
     flex-direction: row;
-    justify-content: space-between;
-    margin-bottom: 10px;
+  }
+
+  .value-item-k {
+    width: 50px;
+    line-height: 2;
+  }
+
+  .value-item-v {
+    font-weight: bold;
+    line-height: 2;
+    margin-left: 10px;
   }
 </style>
\ No newline at end of file