watch: 补充立即执行例子

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

@@ -12,38 +12,52 @@
       <text>子组件 值是否变化</text>
       <text>{{ changed }}</text>
     </view>
+    <view class="row">
+      <text>immediate=true 值应为 true</text>
+      <text>{{ immediateChanged }}</text>
+    </view>
   </view>
 </template>
 
 <script>
-export default {
-  name: "watch-child",
-  data() {
-    return {
-      val: "init",
-      changed: false,
-    }
-  },
-  mounted() {
-    this.createWatch()
-  },
-  methods: {
-    createWatch() {
-      this.$watch('val', () => {
-        this.changed = !this.changed
-      })
+  export default {
+    name: "watch-child",
+    data() {
+      return {
+        val: "init",
+        changed: false,
+        immediateValue: 'value',
+        immediateChanged: false,
+      }
+    },
+    mounted() {
+      this.createWatch()
+      this.createImmediateWatch()
+    },
+    methods: {
+      createWatch() {
+        this.$watch('val', () => {
+          this.changed = !this.changed
+        })
 
-      this.val = 'changed'
+        this.val = 'changed'
+      },
+      createImmediateWatch() {
+        this.$watch('immediateWatchValue', () => {
+          this.immediateChanged = !this.immediateChanged
+        }, {
+          immediate: true
+        })
+      },
     }
   }
-}
 </script>
 
 <style>
-.row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-bottom: 10px;
-}
-</style>
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+</style>
\ No newline at end of file

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

@@ -14,6 +14,9 @@ describe('$watch()', () => {
 
     expect(value).not.toBe(initValue)
     expect(isChange).toBe(true)
+
+    const isChange2 = await (await page.data()).immediateChanged
+    expect(isChange2).toBe(true)
   })
 
   it('子组件 $watch() 生效', async () => {
@@ -24,5 +27,8 @@ describe('$watch()', () => {
 
     expect(value).not.toBe(initValue)
     expect(isChange).toBe(true)
+
+    const isChange2 = await (await comp.data()).immediateChanged
+    expect(isChange2).toBe(true)
   })
-})
+})
\ No newline at end of file

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

@@ -12,54 +12,68 @@
       <text>值是否变化</text>
       <text>{{ changed }}</text>
     </view>
+    <view class="row">
+      <text>immediate=true 值应为 true</text>
+      <text>{{ immediateChanged }}</text>
+    </view>
     <watch-child class="watch-child"></watch-child>
   </view>
 </template>
 
 <script>
-import child from './child.uvue'
+  import child from './child.uvue'
 
-export default {
-  components: {
-    watchChild: child
-  },
-  data() {
-    return {
-      val: "init",
-      changed: false,
-      // a: 'a',
-      // b: 'b',
-      // abChanged: false
-    }
-  },
-  mounted() {
-    this.createWatch()
-    // this.createGetterWatch()
-  },
-  methods: {
-    createWatch() {
-      this.$watch('val', () => {
-        this.changed = !this.changed
-      })
-
-      this.val = 'changed'
+  export default {
+    components: {
+      watchChild: child
+    },
+    data() {
+      return {
+        val: "init",
+        changed: false,
+        immediateValue: 'value',
+        immediateChanged: false,
+        // a: 'a',
+        // b: 'b',
+        // abChanged: false
+      }
     },
-    // createGetterWatch () {
-    //   this.$watch(() => this.a + this.b, () => {
-    //     this.abChanged = !this.abChanged
-    //   })
-    //
-    //   this.a = 'changed'
-    // }
+    mounted() {
+      this.createWatch()
+      this.createImmediateWatch()
+      // this.createGetterWatch()
+    },
+    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'
+      // }
+    }
   }
-}
 </script>
 
 <style>
-.row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-bottom: 10px;
-}
-</style>
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+</style>
\ No newline at end of file