From 96eabdd62a9833351b967d832752421b2c999374 Mon Sep 17 00:00:00 2001 From: zhenyuWang <13641039885@163.com> Date: Sun, 21 Apr 2024 15:41:12 +0800 Subject: [PATCH] refactor(reactivity): shallowReadonly --- pages/index/index.uvue | 5 ++ .../shallow-reactive/shallow-reactive.test.js | 1 + .../shallow-readonly/shallow-readonly.test.js | 14 ++-- .../shallow-readonly/shallow-readonly.uvue | 78 +++++++++++-------- ...ions-API-composition-API-correspondence.md | 2 +- 5 files changed, 60 insertions(+), 40 deletions(-) diff --git a/pages/index/index.uvue b/pages/index/index.uvue index ca4ac9d..e03e4c1 100644 --- a/pages/index/index.uvue +++ b/pages/index/index.uvue @@ -607,6 +607,11 @@ export default { name: 'shallowReactive', url: 'shallow-reactive/shallow-reactive' }, + { + id: 'shallow-readonly', + name: 'shallowReadonly', + url: 'shallow-readonly/shallow-readonly' + }, ] } ] as Page[] diff --git a/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js b/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js index 88c775a..13b8b25 100644 --- a/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js +++ b/pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js @@ -22,6 +22,7 @@ describe('shallowReactive', () => { await incrementStateCountBtn.tap() expect(await stateCount.text()).toBe('1') + // TODO: web 失败,获å–到的还是 0 expect(await stateNestedCount.text()).toBe('1') }) }) \ No newline at end of file diff --git a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.test.js b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.test.js index 5e022f6..f01ad29 100644 --- a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.test.js +++ b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.test.js @@ -1,4 +1,4 @@ -const PAGE_PATH = '/pages/composition-api/reactivity/shallow-readonly/shallow-readonly' +const PAGE_PATH = '/pages/reactivity/advanced/shallow-readonly/shallow-readonly' describe('shallowReadonly', () => { let page = null @@ -8,10 +8,10 @@ describe('shallowReadonly', () => { }) it('basic', async () => { let stateCount = await page.$('#state-count') - expect(await stateCount.text()).toBe('state.count: 0') + expect(await stateCount.text()).toBe('0') let stateNestedCount = await page.$('#state-nested-count') - expect(await stateNestedCount.text()).toBe('state.nested.count: 0') + expect(await stateNestedCount.text()).toBe('0') if (process.env.uniTestPlatformInfo.startsWith('web')) { // web端æ“作readonlyå¯¹è±¡ä¼šç›´æŽ¥ç¼–è¯‘å¤±è´¥ï¼Œä»¥ä¸‹æµ‹è¯•æ— æ³•æ‰§è¡Œ @@ -24,15 +24,15 @@ describe('shallowReadonly', () => { const incrementStateNestedCountBtn = await page.$('#increment-state-nested-count-btn') await incrementStateNestedCountBtn.tap() - expect(await stateCount.text()).toBe('state.count: 0') - expect(await stateNestedCount.text()).toBe('state.nested.count: 0') + expect(await stateCount.text()).toBe('0') + expect(await stateNestedCount.text()).toBe('0') const updatePageRenderBtn = await page.$('#update-page-render-btn') await updatePageRenderBtn.tap() stateCount = await page.$('#state-count') - expect(await stateCount.text()).toBe('state.count: 0') + expect(await stateCount.text()).toBe('0') stateNestedCount = await page.$('#state-nested-count') - expect(await stateNestedCount.text()).toBe('state.nested.count: 1') + expect(await stateNestedCount.text()).toBe('1') }) }) \ No newline at end of file diff --git a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue index 100e85e..9f4b6d4 100644 --- a/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue +++ b/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue @@ -1,45 +1,59 @@ <template> <view :key="pageKey" class="page"> - <text id="state-count" class="mb-10">state.count: {{ state.count }}</text> - <text id="state-nested-count" class="mb-10">state.nested.count: {{ state.nested.count }}</text> - <button id="increment-state-count-btn" class="mb-10" @click="incrementStateCount"> + <view class="flex justify-between flex-row mb-10"> + <text>state.count:</text> + <text id="state-count">{{ state.count }}</text> + </view> + <view class="flex justify-between flex-row mb-10"> + <text>state.nested.count:</text> + <text id="state-nested-count">{{ state.nested.count }}</text> + </view> + <button + id="increment-state-count-btn" + class="mb-10" + @click="incrementStateCount"> increment state.count </button> - <button id="increment-state-nested-count-btn" class="mb-10" @click="incrementStateNestedCount"> + <button + id="increment-state-nested-count-btn" + class="mb-10" + @click="incrementStateNestedCount"> increment state.nested.count </button> - <button id="update-page-render-btn" @click="updatePageRender">update page render</button> + <button id="update-page-render-btn" @click="updatePageRender"> + update page render + </button> </view> </template> -<script setup> - let pageKey = ref<number>(0) +<script setup lang="uts"> +let pageKey = ref<number>(0) - type StateNested = { - count : number - } - type State = { - count : number, - nested : StateNested - } - const state = shallowReadonly({ - count: 0, - nested: { - count: 0 - } as StateNested - } as State) +type StateNested = { + count : number +} +type State = { + count : number, + nested : StateNested +} +const state = shallowReadonly({ + count: 0, + nested: { + count: 0 + } as StateNested +} as State) - // #ifdef APP - const incrementStateCount = () => { - state.count++ - } +// #ifdef APP +const incrementStateCount = () => { + state.count++ +} - const incrementStateNestedCount = () => { - state.nested.count++ - } - // #endif +const incrementStateNestedCount = () => { + state.nested.count++ +} +// #endif - const updatePageRender = () => { - pageKey.value = Date.now() - } -</script> \ No newline at end of file +const updatePageRender = () => { + pageKey.value = Date.now() +} +</script> diff --git a/refactor_options-API-composition-API-correspondence.md b/refactor_options-API-composition-API-correspondence.md index f353ab7..0aa8aa5 100644 --- a/refactor_options-API-composition-API-correspondence.md +++ b/refactor_options-API-composition-API-correspondence.md @@ -146,7 +146,7 @@ function transform(fileInfo, api) { - [x] markRaw - [x] onScopeDispose - [x] shallowReactive -- [ ] shallowReadonly +- [x] shallowReadonly - [ ] shallowRef - [ ] toRaw - [ ] triggerRef -- GitLab