watch: 补充立即执行例子

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

@@ -12,20 +12,27 @@
       <text>子组件 值是否变化</text>
       <text>{{ changed }}</text>
     </view>
+    <view class="row">
+      <text>immediate=true 值应为 true</text>
+      <text>{{ immediateChanged }}</text>
+    </view>
   </view>
 </template>
 
 <script>
-export default {
+  export default {
     name: "watch-child",
     data() {
       return {
         val: "init",
         changed: false,
+        immediateValue: 'value',
+        immediateChanged: false,
       }
     },
     mounted() {
       this.createWatch()
+      this.createImmediateWatch()
     },
     methods: {
       createWatch() {
@@ -34,16 +41,23 @@ export default {
         })
 
         this.val = 'changed'
+      },
+      createImmediateWatch() {
+        this.$watch('immediateWatchValue', () => {
+          this.immediateChanged = !this.immediateChanged
+        }, {
+          immediate: true
+        })
+      },
     }
   }
-}
 </script>
 
 <style>
-.row {
+  .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,14 +12,18 @@
       <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 {
+  export default {
     components: {
       watchChild: child
     },
@@ -27,6 +31,8 @@ export default {
       return {
         val: "init",
         changed: false,
+        immediateValue: 'value',
+        immediateChanged: false,
         // a: 'a',
         // b: 'b',
         // abChanged: false
@@ -34,6 +40,7 @@ export default {
     },
     mounted() {
       this.createWatch()
+      this.createImmediateWatch()
       // this.createGetterWatch()
     },
     methods: {
@@ -44,6 +51,13 @@ export default {
 
         this.val = 'changed'
       },
+      createImmediateWatch() {
+        this.$watch('immediateWatchValue', () => {
+          this.immediateChanged = !this.immediateChanged
+        }, {
+          immediate: true
+        })
+      },
       // createGetterWatch () {
       //   this.$watch(() => this.a + this.b, () => {
       //     this.abChanged = !this.abChanged
@@ -52,14 +66,14 @@ export default {
       //   this.a = 'changed'
       // }
     }
-}
+  }
 </script>
 
 <style>
-.row {
+  .row {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     margin-bottom: 10px;
-}
+  }
 </style>
\ No newline at end of file