From feb9f5027a3bc89fe4cc1d2cf05f7eb49c26ac10 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Wed, 22 May 2024 11:18:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor(reactivity):=20=E4=BC=98=E5=8C=96=20re?=
 =?UTF-8?q?f=20=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

---
 pages/reactivity/core/ref/ref.test.js | 26 ++++++-----
 pages/reactivity/core/ref/ref.uvue    | 64 ++++++++++++++++++---------
 2 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/pages/reactivity/core/ref/ref.test.js b/pages/reactivity/core/ref/ref.test.js
index 8f3831f..a39cb92 100644
--- a/pages/reactivity/core/ref/ref.test.js
+++ b/pages/reactivity/core/ref/ref.test.js
@@ -7,19 +7,25 @@ describe('ref', () => {
     await page.waitFor('view')
   })
   it('basic', async () => {
-    const count1 = await page.$('#count1')
-    expect(await count1.text()).toBe('count1: 0')
-    const count2 = await page.$('#count2')
-    expect(await count2.text()).toBe('count2: 0')
+    const count = await page.$('#count')
+    expect(await count.text()).toBe('0')
+    const str = await page.$('#str')
+    expect(await str.text()).toBe('default str')
+    const bool = await page.$('#bool')
+    expect(await bool.text()).toBe('false')
+    const arr = await page.$('#arr')
+    expect(await arr.text()).toBe('[1,2,3]')
     const counterCount = await page.$('#counter-count')
-    expect(await counterCount.text()).toBe('counter.count: 0')
+    expect(await counterCount.text()).toBe('0')
 
-    const incrementBtn = await page.$('#increment-btn')
-    await incrementBtn.tap()
+    const changeDataBtn = await page.$('#change-data-btn')
+    await changeDataBtn.tap()
 
-    expect(await count1.text()).toBe('count1: 2')
-    expect(await count2.text()).toBe('count2: 2')
-    expect(await counterCount.text()).toBe('counter.count: 1')
+    expect(await count.text()).toBe('1')
+    expect(await str.text()).toBe('new str')
+    expect(await bool.text()).toBe('true')
+    expect(await arr.text()).toBe('[1,2,3,4]')
+    expect(await counterCount.text()).toBe('1')
   })
 
 })
\ No newline at end of file
diff --git a/pages/reactivity/core/ref/ref.uvue b/pages/reactivity/core/ref/ref.uvue
index 93cc9f6..998ef9b 100644
--- a/pages/reactivity/core/ref/ref.uvue
+++ b/pages/reactivity/core/ref/ref.uvue
@@ -1,28 +1,50 @@
 <template>
   <view class="page">
-    <text id="count1" class="mb-10">count1: {{ count1 }}</text>
-    <text id="count2" class="mb-10">count2: {{ count2 }}</text>
-    <text id="counter-count" class="mb-10">counter.count: {{ counter.count }}</text>
-    <button id="increment-btn" @click="increment">increment</button>
+    <view class="flex justify-between flex-row mb-10">
+      <text>count:</text>
+      <text id="count">{{ count }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>str:</text>
+      <text id="str">{{ str }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>bool:</text>
+      <text id="bool">{{ bool }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>arr:</text>
+      <text id="arr">{{ JSON.stringify(arr) }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>counter.count:</text>
+      <text id="counter-count">{{ counter.count }}</text>
+    </view>
+    <button id="change-data-btn" @click="changeData">change data</button>
   </view>
 </template>
 
-<script setup lang='uts'>
-  // 基础数据类型可自动推导类型
-  const count1 = ref(0)
-  const count2 = ref(count1)
+<script setup lang="uts">
+// 基础数据类型可自动推导类型
+const count = ref(0)
+const str = ref('default str')
+const bool = ref(false)
 
-  type Counter = {
-    count : number
-  }
-  // 可通过泛型指定类型
-  const counter = ref<Counter>({
-    count: 0
-  })
+// 可通过泛型指定类型
+const arr = ref<number[]>([1, 2, 3])
+type Counter = {
+  count : number
+}
+// 可通过泛型指定类型
+const counter = ref<Counter>({
+  count: 0
+})
 
-  const increment = () => {
-    count1.value++
-    count2.value++
-    counter.value.count++
-  }
-</script>
\ No newline at end of file
+const changeData = () => {
+  count.value++
+  str.value = 'new str'
+  bool.value = !bool.value
+  arr.value.push(arr.value.length + 1)
+  counter.value.count++
+}
+</script>
-- 
GitLab