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