From 84fcdd8be8643a6ffb8c76b26767dd7f35805e67 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Tue, 14 May 2024 19:18:35 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E7=A4=BA?=
 =?UTF-8?q?=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

---
 .../template/template-composition.uvue           |  8 ++++----
 .../template/template-options.uvue               |  6 +++---
 .../special-elements/template/template.test.js   |  9 ++++-----
 .../shallow-reactive/shallow-reactive.test.js    |  4 ++--
 .../shallow-reactive/shallow-reactive.uvue       | 16 +++++++++-------
 .../shallow-readonly/shallow-readonly.uvue       |  9 +++++----
 .../advanced/shallow-ref/shallow-ref.test.js     |  4 ++--
 .../advanced/shallow-ref/shallow-ref.uvue        | 13 +++++++------
 pages/reactivity/core/reactive/reactive.test.js  |  2 +-
 pages/reactivity/core/reactive/reactive.uvue     |  2 +-
 pages/reactivity/core/readonly/readonly.uvue     | 10 +++++-----
 pages/reactivity/core/ref/ref.test.js            |  2 +-
 pages/reactivity/core/ref/ref.uvue               |  8 ++++----
 13 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/pages/built-in/special-elements/template/template-composition.uvue b/pages/built-in/special-elements/template/template-composition.uvue
index 6c2ac64..4958685 100644
--- a/pages/built-in/special-elements/template/template-composition.uvue
+++ b/pages/built-in/special-elements/template/template-composition.uvue
@@ -1,9 +1,9 @@
 <template>
   <view class="page">
     <template v-if="dataInfo.isShow">
-      <view class="title">{{ title }}</view>
+      <text id="title">{{ title }}</text>
     </template>
-    <view class="show-botton" @click="handleShow">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</view>
+    <button id="show-botton" @click="handleShow">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</button>
     <template v-for="(item, index) in list" :key="index">
       <view class="item">{{ index + 1 }}.{{ item.name }}</view>
     </template>
@@ -31,14 +31,14 @@ const list = ref<ListItem[]>([
   {
     name: 'foo2'
   }
-] as ListItem[])
+])
 
 const handleShow = () => {
   dataInfo.isShow = !dataInfo.isShow
 }
 
 const goMapStyle = () => {
-  uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-composition' })
+  uni.navigateTo({ url: '/pages/built-in/special-elements/template/template-map-style-composition' })
 }
 
 defineExpose({
diff --git a/pages/built-in/special-elements/template/template-options.uvue b/pages/built-in/special-elements/template/template-options.uvue
index 5dfffc2..0d1b14e 100644
--- a/pages/built-in/special-elements/template/template-options.uvue
+++ b/pages/built-in/special-elements/template/template-options.uvue
@@ -1,9 +1,9 @@
 <template>
   <view class="page">
     <template v-if="dataInfo.isShow">
-      <view class="title">{{ title }}</view>
+      <text id="title">{{ title }}</text>
     </template>
-    <view class="show-botton" @click="handleShow">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</view>
+    <button id="show-botton" @click="handleShow">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</button>
     <template v-for="(item, index) in list" :key="index">
       <view class="item">{{ index + 1 }}.{{ item.name }}</view>
     </template>
@@ -39,7 +39,7 @@ export default {
       this.dataInfo.isShow = !this.dataInfo.isShow
     },
     goMapStyle() {
-      uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-options' })
+      uni.navigateTo({ url: '/pages/built-in/special-elements/template/template-map-style-options' })
     }
   }
 }
diff --git a/pages/built-in/special-elements/template/template.test.js b/pages/built-in/special-elements/template/template.test.js
index 95c8eef..04f3f60 100644
--- a/pages/built-in/special-elements/template/template.test.js
+++ b/pages/built-in/special-elements/template/template.test.js
@@ -5,16 +5,15 @@ describe('built-in/special-elements/component', () => {
   let page
   const test = async () => {
     await page.waitFor('view')
-    expect.assertions(4);
-    const showBtn = await page.$('.show-botton')
+    const showBtn = await page.$('#show-botton')
+    expect(await showBtn.text()).toBe("点击显示")
     await showBtn.tap()
     
     const dataInfo = await page.data('dataInfo')
     expect(dataInfo.isShow).toBeTruthy()
-    const getTitle = await page.$('.title')
+    const getTitle = await page.$('#title')
     expect(await getTitle.text()).toBe("hello")
-    const getShow = await page.$('.show-botton')
-    expect(await getShow.text()).toBe("点击隐藏")
+    expect(await showBtn.text()).toBe("点击隐藏")
     expect((await page.$$('.item')).length).toBe(2)
   }
   it('template Options API', async () => {
diff --git a/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js b/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js
index af5b04b..1f75517 100644
--- a/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js
+++ b/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js
@@ -15,12 +15,12 @@ describe('shallowReactive', () => {
     const stateNestedCount = await page.$('#state-nested-count')
     expect(await stateNestedCount.text()).toBe('0')
 
-    const incrementStateNestedCountBtn = await page.$('.increment-state-nested-count-btn')
+    const incrementStateNestedCountBtn = await page.$('#increment-state-nested-count-btn')
     await incrementStateNestedCountBtn.tap()
 
     expect(await stateNestedCount.text()).toBe('0')
 
-    const incrementStateCountBtn = await page.$('.increment-state-count-btn')
+    const incrementStateCountBtn = await page.$('#increment-state-count-btn')
     await incrementStateCountBtn.tap()
 
     if (isWeb) {
diff --git a/pages/reactivity/advanced/shallow-reactive/shallow-reactive.uvue b/pages/reactivity/advanced/shallow-reactive/shallow-reactive.uvue
index 83bb53a..dbfa009 100644
--- a/pages/reactivity/advanced/shallow-reactive/shallow-reactive.uvue
+++ b/pages/reactivity/advanced/shallow-reactive/shallow-reactive.uvue
@@ -8,13 +8,14 @@
       <text>state.nested.count:</text>
       <text id="state-nested-count">{{ state.nested.count }}</text>
     </view>
-    <button
-      class="increment-state-count-btn mb-10"
+    <button
+      id="increment-state-count-btn"
+      class="mb-10"
       @click="incrementStateCount">
       increment state.count
     </button>
     <button
-      class="increment-state-nested-count-btn"
+      id="increment-state-nested-count-btn"
       @click="incrementStateNestedCount">
       increment state.nested.count
     </button>
@@ -28,13 +29,14 @@ type StateNested = {
 type State = {
   count : number,
   nested : StateNested
-}
-const state = shallowReactive({
+}
+// 可通过泛型指定类型
+const state = shallowReactive<State>({
   count: 0,
   nested: {
     count: 0
-  } as StateNested
-} as State)
+  }
+})
 
 const incrementStateCount = () => {
   state.count++
diff --git a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue
index 9f4b6d4..80857c1 100644
--- a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue
+++ b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue
@@ -35,13 +35,14 @@ type StateNested = {
 type State = {
   count : number,
   nested : StateNested
-}
-const state = shallowReadonly({
+}
+// 可通过泛型指定类型
+const state = shallowReadonly<State>({
   count: 0,
   nested: {
     count: 0
-  } as StateNested
-} as State)
+  }
+})
 
 // #ifdef APP
 const incrementStateCount = () => {
diff --git a/pages/reactivity/advanced/shallow-ref/shallow-ref.test.js b/pages/reactivity/advanced/shallow-ref/shallow-ref.test.js
index 4231a50..859dca8 100644
--- a/pages/reactivity/advanced/shallow-ref/shallow-ref.test.js
+++ b/pages/reactivity/advanced/shallow-ref/shallow-ref.test.js
@@ -10,12 +10,12 @@ describe('shallowRef', () => {
     const stateCount = await page.$('#state-count')
     expect(await stateCount.text()).toBe('0')
 
-    const incrementStateCountBtn = await page.$('.increment-state-count-btn')
+    const incrementStateCountBtn = await page.$('#increment-state-count-btn')
     await incrementStateCountBtn.tap()
 
     expect(await stateCount.text()).toBe('0')
 
-    const updateStateBtn = await page.$('.update-state-btn')
+    const updateStateBtn = await page.$('#update-state-btn')
     await updateStateBtn.tap()
 
     expect(await stateCount.text()).toBe('1')
diff --git a/pages/reactivity/advanced/shallow-ref/shallow-ref.uvue b/pages/reactivity/advanced/shallow-ref/shallow-ref.uvue
index 4fa8f80..69afe90 100644
--- a/pages/reactivity/advanced/shallow-ref/shallow-ref.uvue
+++ b/pages/reactivity/advanced/shallow-ref/shallow-ref.uvue
@@ -4,12 +4,13 @@
       <text>state.count:</text>
       <text id="state-count">{{ state.count }}</text>
     </view>
-    <button
-      class="increment-state-count-btn mb-10"
+    <button
+      id="increment-state-count-btn"
+      class="mb-10"
       @click="incrementStateCount">
       increment state.count
     </button>
-    <button class="update-state-btn" @click="updateState">update state</button>
+    <button id="update-state-btn" @click="updateState">update state</button>
   </view>
 </template>
 
@@ -17,10 +18,10 @@
 type State = {
   count: number
 }
-
-const state = shallowRef({
+// 可通过泛型指定类型
+const state = shallowRef<State>({
   count: 0
-} as State)
+})
 
 const incrementStateCount = () => {
   state.value.count++
diff --git a/pages/reactivity/core/reactive/reactive.test.js b/pages/reactivity/core/reactive/reactive.test.js
index 4d3ccc0..df73bba 100644
--- a/pages/reactivity/core/reactive/reactive.test.js
+++ b/pages/reactivity/core/reactive/reactive.test.js
@@ -19,7 +19,7 @@ describe('reactive', () => {
     const objArr = await page.$('#obj-arr')
     expect(await objArr.text()).toBe('["a","b","c"]')
 
-    const updateBtn = await page.$('.update-btn')
+    const updateBtn = await page.$('#update-btn')
     await updateBtn.tap()
 
     expect(await count.text()).toBe('2')
diff --git a/pages/reactivity/core/reactive/reactive.uvue b/pages/reactivity/core/reactive/reactive.uvue
index 1827c93..ae813e4 100644
--- a/pages/reactivity/core/reactive/reactive.uvue
+++ b/pages/reactivity/core/reactive/reactive.uvue
@@ -16,7 +16,7 @@
       <text>obj.arr:</text>
       <text id="obj-arr">{{ JSON.stringify(obj['arr']) }}</text>
     </view>
-    <button class="update-btn" @click="update">update</button>
+    <button id="update-btn" @click="update">update</button>
   </view>
 </template>
 
diff --git a/pages/reactivity/core/readonly/readonly.uvue b/pages/reactivity/core/readonly/readonly.uvue
index 0bab5bd..a7f3e98 100644
--- a/pages/reactivity/core/readonly/readonly.uvue
+++ b/pages/reactivity/core/readonly/readonly.uvue
@@ -40,14 +40,14 @@ type Data = {
   num : number,
   arr : string[]
 }
-
-const data = reactive({
+// 可通过泛型指定类型
+const data = reactive<Data>({
   str: 'default str',
   num: 0,
   arr: ['a', 'b', 'c']
-} as Data)
-
-const readonlyData = readonly(data)
+})
+// 可通过泛型指定类型
+const readonlyData = readonly<Data>(data)
 
 const updateData = () => {
   data.str = 'new str'
diff --git a/pages/reactivity/core/ref/ref.test.js b/pages/reactivity/core/ref/ref.test.js
index a759a9c..8f3831f 100644
--- a/pages/reactivity/core/ref/ref.test.js
+++ b/pages/reactivity/core/ref/ref.test.js
@@ -14,7 +14,7 @@ describe('ref', () => {
     const counterCount = await page.$('#counter-count')
     expect(await counterCount.text()).toBe('counter.count: 0')
 
-    const incrementBtn = await page.$('.increment-btn')
+    const incrementBtn = await page.$('#increment-btn')
     await incrementBtn.tap()
 
     expect(await count1.text()).toBe('count1: 2')
diff --git a/pages/reactivity/core/ref/ref.uvue b/pages/reactivity/core/ref/ref.uvue
index ce1c556..93cc9f6 100644
--- a/pages/reactivity/core/ref/ref.uvue
+++ b/pages/reactivity/core/ref/ref.uvue
@@ -3,7 +3,7 @@
     <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 class="increment-btn" @click="increment">increment</button>
+    <button id="increment-btn" @click="increment">increment</button>
   </view>
 </template>
 
@@ -15,10 +15,10 @@
   type Counter = {
     count : number
   }
-  // TODO: Android 端暂不支持通过泛型指定类型，可通过 as 方式指定类型
-  const counter = ref({
+  // 可通过泛型指定类型
+  const counter = ref<Counter>({
     count: 0
-  } as Counter)
+  })
 
   const increment = () => {
     count1.value++
-- 
GitLab