From 625c58907b78d9931f573af2608498b41fe73961 Mon Sep 17 00:00:00 2001
From: jixinbao <jixinbao@dcloud.io>
Date: Tue, 23 Jul 2024 20:39:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=9A=E8=BF=87=20data=20=E5=8C=85?=
 =?UTF-8?q?=E8=A3=85=E7=9A=84=E5=85=83=E7=B4=A0=E4=B8=8D=E4=BC=9A=E8=A2=AB?=
 =?UTF-8?q?=E4=BE=A6=E5=90=AC=E5=8C=85=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data/data-composition.uvue                | 30 ++++++-
 .../component-instance/data/data-options.uvue | 80 ++++++++++++-------
 pages/component-instance/data/data.test.js    | 19 +++--
 3 files changed, 89 insertions(+), 40 deletions(-)

diff --git a/pages/component-instance/data/data-composition.uvue b/pages/component-instance/data/data-composition.uvue
index 04b533c..098a9db 100644
--- a/pages/component-instance/data/data-composition.uvue
+++ b/pages/component-instance/data/data-composition.uvue
@@ -24,6 +24,10 @@
       <text>obj.arr: </text>
       <text id="obj-arr">{{ obj.arr.join(',') }}</text>
     </view>
+    <view ref='htmlRef' id="idRef" class="flex justify-between flex-row mb-10">
+      <text>data 存储 element不需要被包装</text>
+      <text id="isSameRefText">{{ refElementIsSame }}</text>
+    </view>
     <button @click="updateData">update data</button>
   </view>
 </template>
@@ -34,7 +38,9 @@
     num : number,
     arr : number[]
   }
-  
+
+  const instance = getCurrentInstance()!.proxy!
+
   const str = ref('default str')
   const num = ref(0)
   // 可通过泛型指定类型
@@ -45,17 +51,35 @@
     arr: [4, 5, 6]
   })
 
+  const refElement = ref(null)
+  const refElementIsSame = ref(false)
+
+  const refTest = () => {
+    console.log(instance.proxy);
+    const queryElementById1 = uni.getElementById('idRef')
+    const queryElementById2 = uni.getElementById('idRef')
+    const htmlRefElement = instance.$refs.htmlRef
+    refElement.value = htmlRefElement
+    if (queryElementById1 === queryElementById2
+      && queryElementById1 === htmlRefElement
+      && queryElementById1 === refElement.value
+    ) {
+      refElementIsSame.value = true
+    }
+  }
   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]
+
+    refTest()
   }
 
   defineExpose({
     updateData
   })
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/component-instance/data/data-options.uvue b/pages/component-instance/data/data-options.uvue
index 3f3eb54..101ac42 100644
--- a/pages/component-instance/data/data-options.uvue
+++ b/pages/component-instance/data/data-options.uvue
@@ -24,40 +24,62 @@
       <text>obj.arr: </text>
       <text id="obj-arr">{{ obj.arr.join(',') }}</text>
     </view>
+    <view ref='htmlRef' id="idRef" class="flex justify-between flex-row mb-10">
+      <text>data 存储 element不需要被包装</text>
+      <text id="isSameRefText">{{ refElementIsSame }}</text>
+    </view>
+
     <button @click="updateData">update data</button>
   </view>
-</template>
-
+</template>
+
 <script lang="uts">
   type Obj = {
     str : string,
     num : number,
     arr : number[]
-  }
-  export default {
-    data() {
-      return {
-        str: 'default str',
-        num: 0,
+  }
+  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
+        // 特殊类型需要通过 as 指定类型
+        obj: {
+          str: 'default obj.str',
+          num: 10,
+          arr: [4, 5, 6]
+        } as Obj,
+        refElement: null,
+        refElementIsSame: false
+      }
+    },
+    methods: {
+      refTest() {
+        const queryElementById1 = uni.getElementById('idRef')
+        const queryElementById2 = uni.getElementById('idRef')
+        const htmlRefElement = this.$refs.htmlRef
+        this.refElement = htmlRefElement
+        if (queryElementById1 === queryElementById2
+          && queryElementById1 === htmlRefElement
+          && queryElementById1 === this.refElement) {
+          this.refElementIsSame = true
+        }
+      },
+      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]
+
+        this.refTest()
+
+
+      },
+    },
+  }
+</script>
diff --git a/pages/component-instance/data/data.test.js b/pages/component-instance/data/data.test.js
index b885196..2e83f31 100644
--- a/pages/component-instance/data/data.test.js
+++ b/pages/component-instance/data/data.test.js
@@ -6,36 +6,39 @@ describe('$data', () => {
   const test = async (page) => {
     const str = await page.$('#str')
     expect(await str.text()).toBe('default str')
-    
+
     const num = await page.$('#num')
     expect(await num.text()).toBe('0')
-    
+
     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')
-    
+
+    const elementIsSame = await page.$('#isSameRefText')
+    expect(await elementIsSame.text()).toBe('false')
     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')
+    expect(await elementIsSame.text()).toBe('true')
   }
 
   it('$data 选项式 API', async () => {
     page = await program.reLaunch(OPTIONS_PAGE_PATH)
     await page.waitFor('view')
-    
+
     await test(page)
   });
 
-- 
GitLab