From 102617bb071d2e946d9f95ab9d63ef2efea7dcf6 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Tue, 14 May 2024 19:56:19 +0800
Subject: [PATCH] =?UTF-8?q?refactor(component=20instance):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=A4=BA=E4=BE=8B=E5=8F=8A=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data/data-composition.uvue                | 54 +++++++++++----
 .../component-instance/data/data-options.uvue | 67 +++++++++++++------
 pages/component-instance/data/data.test.js    | 12 ++++
 pages/reactivity/core/reactive/reactive.uvue  |  1 +
 4 files changed, 101 insertions(+), 33 deletions(-)

diff --git a/pages/component-instance/data/data-composition.uvue b/pages/component-instance/data/data-composition.uvue
index c131ae4..04b533c 100644
--- a/pages/component-instance/data/data-composition.uvue
+++ b/pages/component-instance/data/data-composition.uvue
@@ -12,22 +12,50 @@
       <text>arr: </text>
       <text id="arr">{{ arr.join(',') }}</text>
     </view>
-    <button type="primary" @click="updateData">update data</button>
+    <view class="flex justify-between flex-row mb-10">
+      <text>obj.str: </text>
+      <text id="obj-str">{{ obj.str }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>obj.num: </text>
+      <text id="obj-num">{{ obj.num }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>obj.arr: </text>
+      <text id="obj-arr">{{ obj.arr.join(',') }}</text>
+    </view>
+    <button @click="updateData">update data</button>
   </view>
 </template>
 
 <script setup lang="uts">
-const str = ref('default str')
-const num = ref(0)
-const arr = ref([1, 2, 3])
+  type Obj = {
+    str : string,
+    num : number,
+    arr : number[]
+  }
+  
+  const str = ref('default str')
+  const num = ref(0)
+  // 可通过泛型指定类型
+  const arr = ref<number[]>([1, 2, 3])
+  const obj = ref<Obj>({
+    str: 'default obj.str',
+    num: 10,
+    arr: [4, 5, 6]
+  })
 
-const updateData = () => {
-  str.value = 'new str'
-  num.value = 1
-  arr.value = [4, 5, 6]
-}
+  const updateData = () => {
+    str.value = 'new str'
+    num.value = 1
+    arr.value = [4, 5, 6]
+    
+    obj.value.str = 'new obj.str'
+    obj.value.num = 100
+    obj.value.arr = [7, 8, 9]
+  }
 
-defineExpose({
-  updateData
-})
-</script>
+  defineExpose({
+    updateData
+  })
+</script>
\ No newline at end of file
diff --git a/pages/component-instance/data/data-options.uvue b/pages/component-instance/data/data-options.uvue
index b32867e..3f3eb54 100644
--- a/pages/component-instance/data/data-options.uvue
+++ b/pages/component-instance/data/data-options.uvue
@@ -12,25 +12,52 @@
       <text>arr: </text>
       <text id="arr">{{ arr.join(',') }}</text>
     </view>
-    <button type="primary" @click="updateData">update data</button>
+    <view class="flex justify-between flex-row mb-10">
+      <text>obj.str: </text>
+      <text id="obj-str">{{ obj.str }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>obj.num: </text>
+      <text id="obj-num">{{ obj.num }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>obj.arr: </text>
+      <text id="obj-arr">{{ obj.arr.join(',') }}</text>
+    </view>
+    <button @click="updateData">update data</button>
   </view>
-</template>
-
+</template>
+
 <script lang="uts">
-export default {
-  data() {
-    return {
-      str: 'default str',
-      num: 0,
-      arr: [1, 2, 3],
-    }
-  },
-  methods: {
-    updateData() {
-      this.str = 'new str'
-      this.num = 1
-      this.arr = [4, 5, 6]
-    },
-  },
-}
-</script>
+  type Obj = {
+    str : string,
+    num : number,
+    arr : number[]
+  }
+  export default {
+    data() {
+      return {
+        str: 'default str',
+        num: 0,
+        arr: [1, 2, 3],
+        // 特殊类型需要通过 as 指定类型
+        obj: {
+          str: 'default obj.str',
+          num: 10,
+          arr: [4, 5, 6]
+        } as Obj
+      }
+    },
+    methods: {
+      updateData() {
+        this.str = 'new str'
+        this.num = 1
+        this.arr = [4, 5, 6]
+
+        this.obj.str = 'new obj.str'
+        this.obj.num = 100
+        this.obj.arr = [7, 8, 9]
+      },
+    },
+  }
+</script>
\ No newline at end of file
diff --git a/pages/component-instance/data/data.test.js b/pages/component-instance/data/data.test.js
index 38029a4..b885196 100644
--- a/pages/component-instance/data/data.test.js
+++ b/pages/component-instance/data/data.test.js
@@ -13,11 +13,23 @@ describe('$data', () => {
     const arr = await page.$('#arr')
     expect(await arr.text()).toBe('1,2,3')
     
+    const objStr = await page.$('#obj-str')
+    expect(await objStr.text()).toBe('default obj.str')
+    
+    const objNum = await page.$('#obj-num')
+    expect(await objNum.text()).toBe('10')
+    
+    const objArr = await page.$('#obj-arr')
+    expect(await objArr.text()).toBe('4,5,6')
+    
     await page.callMethod('updateData')
     
     expect(await str.text()).toBe('new str')
     expect(await num.text()).toBe('1')
     expect(await arr.text()).toBe('4,5,6')
+    expect(await objStr.text()).toBe('new obj.str')
+    expect(await objNum.text()).toBe('100')
+    expect(await objArr.text()).toBe('7,8,9')
   }
 
   it('$data 选项式 API', async () => {
diff --git a/pages/reactivity/core/reactive/reactive.uvue b/pages/reactivity/core/reactive/reactive.uvue
index ae813e4..8f3c3c0 100644
--- a/pages/reactivity/core/reactive/reactive.uvue
+++ b/pages/reactivity/core/reactive/reactive.uvue
@@ -23,6 +23,7 @@
 <script setup lang="uts">
 const count = ref(0)
 
+// TODO: 待支持后补充泛型示例
 const obj = reactive({
   str: 'default str',
   num: count,
-- 
GitLab