From 9941fe781b98dec9b9b8ef86a198642ec00b81f7 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Tue, 12 Sep 2023 11:12:54 +0800
Subject: [PATCH] =?UTF-8?q?watch:=20=E8=A1=A5=E5=85=85=E7=AB=8B=E5=8D=B3?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C=E4=BE=8B=E5=AD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../watch-function/child.uvue                 | 64 ++++++++-----
 .../watch-function/watch-function.test.js     |  8 +-
 .../watch-function/watch-function.uvue        | 94 +++++++++++--------
 3 files changed, 100 insertions(+), 66 deletions(-)

diff --git a/pages/component-instance/watch-function/child.uvue b/pages/component-instance/watch-function/child.uvue
index deb6619..e5cd2df 100644
--- a/pages/component-instance/watch-function/child.uvue
+++ b/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
diff --git a/pages/component-instance/watch-function/watch-function.test.js b/pages/component-instance/watch-function/watch-function.test.js
index 16ccaba..d7c6b86 100644
--- a/pages/component-instance/watch-function/watch-function.test.js
+++ b/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
diff --git a/pages/component-instance/watch-function/watch-function.uvue b/pages/component-instance/watch-function/watch-function.uvue
index cdd7f9f..c89d271 100644
--- a/pages/component-instance/watch-function/watch-function.uvue
+++ b/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
-- 
GitLab