From 389ac221d6d9ec368891c837a5d711ee069fa002 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Sat, 20 Apr 2024 18:39:33 +0800
Subject: [PATCH] refactor(reactivity): readonly

---
 pages/index/index.uvue                        |  5 ++
 .../reactivity/core/readonly/readonly.test.js | 42 ++++-----
 pages/reactivity/core/readonly/readonly.uvue  | 87 +++++++++++--------
 3 files changed, 79 insertions(+), 55 deletions(-)

diff --git a/pages/index/index.uvue b/pages/index/index.uvue
index 2585174..1e32028 100644
--- a/pages/index/index.uvue
+++ b/pages/index/index.uvue
@@ -486,6 +486,11 @@ export default {
                   name: 'reactive',
                   url: 'reactive/reactive'
                 },
+                {
+                  id: 'readonly',
+                  name: 'readonly',
+                  url: 'readonly/readonly'
+                },
               ]
             }
           ] as Page[]
diff --git a/pages/reactivity/core/readonly/readonly.test.js b/pages/reactivity/core/readonly/readonly.test.js
index e8dadf8..83ecd69 100644
--- a/pages/reactivity/core/readonly/readonly.test.js
+++ b/pages/reactivity/core/readonly/readonly.test.js
@@ -1,4 +1,4 @@
-const PAGE_PATH = '/pages/composition-api/reactivity/readonly/readonly'
+const PAGE_PATH = '/pages/reactivity/core/readonly/readonly'
 
 describe('ref', () => {
   let page = null
@@ -8,37 +8,37 @@ describe('ref', () => {
   })
   it('basic', async () => {
     const dataStr = await page.$('#data-str')
-    expect(await dataStr.text()).toBe('data.str: default str')
+    expect(await dataStr.text()).toBe('default str')
     const dataNum = await page.$('#data-num')
-    expect(await dataNum.text()).toBe('data.num: 0')
-    const dataArr = await page.$('#data-arr')
-    expect(await dataArr.text()).toBe('data.arr: ["a","b","c"]')
+    expect(await dataNum.text()).toBe('0')
+    const dataArr = await page.$('#data-arr')
+    expect(await dataArr.text()).toBe('["a","b","c"]')
 
     const readonlyDataStr = await page.$('#readonly-data-str')
-    expect(await readonlyDataStr.text()).toBe('readonly data.str: default str')
+    expect(await readonlyDataStr.text()).toBe('default str')
     const readonlyDataNum = await page.$('#readonly-data-num')
-    expect(await readonlyDataNum.text()).toBe('readonly data.num: 0')
-    const readonlyDataArr = await page.$('#readonly-data-arr')
-    expect(await readonlyDataArr.text()).toBe('readonly data.arr: ["a","b","c"]')
+    expect(await readonlyDataNum.text()).toBe('0')
+    const readonlyDataArr = await page.$('#readonly-data-arr')
+    expect(await readonlyDataArr.text()).toBe('["a","b","c"]')
 
     const updateDataBtn = await page.$('#update-data-btn')
     await updateDataBtn.tap()
 
-    expect(await dataStr.text()).toBe('data.str: new str')
-    expect(await dataNum.text()).toBe('data.num: 1')
-    expect(await dataArr.text()).toBe('data.arr: ["a","b","c","d"]')
-    expect(await readonlyDataStr.text()).toBe('readonly data.str: new str')
-    expect(await readonlyDataNum.text()).toBe('readonly data.num: 1')
-    expect(await readonlyDataArr.text()).toBe('readonly data.arr: ["a","b","c","d"]')
+    expect(await dataStr.text()).toBe('new str')
+    expect(await dataNum.text()).toBe('1')
+    expect(await dataArr.text()).toBe('["a","b","c","d"]')
+    expect(await readonlyDataStr.text()).toBe('new str')
+    expect(await readonlyDataNum.text()).toBe('1')
+    expect(await readonlyDataArr.text()).toBe('["a","b","c","d"]')
 
     const updateReadonlyDataBtn = await page.$('#update-readonly-data-btn')
     await updateReadonlyDataBtn.tap()
 
-    expect(await dataStr.text()).toBe('data.str: new str')
-    expect(await dataNum.text()).toBe('data.num: 1')
-    expect(await dataArr.text()).toBe('data.arr: ["a","b","c","d"]')
-    expect(await readonlyDataStr.text()).toBe('readonly data.str: new str')
-    expect(await readonlyDataNum.text()).toBe('readonly data.num: 1')
-    expect(await readonlyDataArr.text()).toBe('readonly data.arr: ["a","b","c","d"]')
+    expect(await dataStr.text()).toBe('new str')
+    expect(await dataNum.text()).toBe('1')
+    expect(await dataArr.text()).toBe('["a","b","c","d"]')
+    expect(await readonlyDataStr.text()).toBe('new str')
+    expect(await readonlyDataNum.text()).toBe('1')
+    expect(await readonlyDataArr.text()).toBe('["a","b","c","d"]')
   })
 })
\ No newline at end of file
diff --git a/pages/reactivity/core/readonly/readonly.uvue b/pages/reactivity/core/readonly/readonly.uvue
index fbf4124..0bab5bd 100644
--- a/pages/reactivity/core/readonly/readonly.uvue
+++ b/pages/reactivity/core/readonly/readonly.uvue
@@ -1,44 +1,63 @@
 <template>
   <view class="page">
-    <text id="data-str" class="mb-10">data.str: {{ data.str }}</text>
-    <text id="data-num" class="mb-10">data.num: {{ data.num }}</text>
-    <text id="data-arr" class="mb-10">data.arr: {{ JSON.stringify(data.arr) }}</text>
+    <view class="flex justify-between flex-row mb-10">
+      <text>data.str:</text>
+      <text id="data-str">{{ data.str }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>data.num:</text>
+      <text id="data-num">{{ data.num }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>data.arr:</text>
+      <text id="data-arr">{{ JSON.stringify(data.arr) }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>readonly data.str:</text>
+      <text id="readonly-data-str">{{ readonlyData.str }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>readonly data.num:</text>
+      <text id="readonly-data-num">{{ readonlyData.num }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>readonly data.arr:</text>
+      <text id="readonly-data-arr">{{ JSON.stringify(readonlyData.arr) }}</text>
+    </view>
 
-    <text id="readonly-data-str" class="mb-10">readonly data.str: {{ readonlyData.str }}</text>
-    <text id="readonly-data-num" class="mb-10">readonly data.num: {{ readonlyData.num }}</text>
-    <text id="readonly-data-arr" class="mb-10">readonly data.arr: {{ JSON.stringify(readonlyData.arr) }}</text>
-
-    <button id="update-data-btn" class="mb-10" @click="updateData">update data</button>
-    <button id="update-readonly-data-btn" @click="updateReadonlyData">update readonly data</button>
+    <button id="update-data-btn" class="mb-10" @click="updateData">
+      update data
+    </button>
+    <button id="update-readonly-data-btn" @click="updateReadonlyData">
+      update readonly data
+    </button>
   </view>
 </template>
 
-<script setup>
-  type Data = {
-    str : string,
-    num : number,
-    arr : string[]
-  }
+<script setup lang="uts">
+type Data = {
+  str : string,
+  num : number,
+  arr : string[]
+}
 
-  const data = reactive({
-    str: 'default str',
-    num: 0,
-    arr: ['a', 'b', 'c']
-  } as Data)
+const data = reactive({
+  str: 'default str',
+  num: 0,
+  arr: ['a', 'b', 'c']
+} as Data)
 
-  const readonlyData = readonly(data)
+const readonlyData = readonly(data)
 
-  const updateData = () => {
-    data.str = 'new str'
-    data.num++
-    data.arr.push('d')
-  }
+const updateData = () => {
+  data.str = 'new str'
+  data.num++
+  data.arr.push('d')
+}
 
-  // #ifdef APP
-  const updateReadonlyData = () => {
-    readonlyData.str = 'new readonly str'
-    readonlyData.num++
-    readonlyData.arr.push('e')
-  }
-  // #endif
-</script>
\ No newline at end of file
+const updateReadonlyData = () => {
+  readonlyData.str = 'new readonly str'
+  readonlyData.num++
+  readonlyData.arr.push('e')
+}
+</script>
-- 
GitLab