feat: 通过 data 包装的元素不会被侦听包装

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>

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>

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)
   });