提交 ebb2eb00 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

refactor(reactivity): customRef

上级 48d37170
......@@ -571,6 +571,17 @@ export default {
url: 'un-ref/un-ref'
},
]
},
{
id: 'advanced',
name: '进阶',
children: [
{
id: 'custom-ref',
name: 'customRef',
url: 'custom-ref/custom-ref'
},
]
}
] as Page[]
},
......
const PAGE_PATH = '/pages/composition-api/reactivity/custom-ref/custom-ref'
const PAGE_PATH = '/pages/reactivity/advanced/custom-ref/custom-ref'
describe('customRef', () => {
let page = null
......@@ -8,19 +8,19 @@ describe('customRef', () => {
})
it('basic', async () => {
const stateCount = await page.$('#state-count')
expect(await stateCount.text()).toBe('state.count: 0')
expect(await stateCount.text()).toBe('0')
const incrementBtn = await page.$('.increment-btn')
await incrementBtn.tap()
expect(await stateCount.text()).toBe('state.count: 0')
// TODO: web 暂不支持 triggerRef
expect(await stateCount.text()).toBe('0')
// TODO: web & ios 暂不支持 triggerRef
if (process.env.uniTestPlatformInfo.startsWith('android')) {
const triggerRefBtn = await page.$('.trigger-ref-btn')
await triggerRefBtn.tap()
expect(await stateCount.text()).toBe('state.count: 1')
expect(await stateCount.text()).toBe('1')
}
})
})
\ No newline at end of file
<template>
<view class="page">
<text id="state-count">state.count: {{state['count']}}</text>
<button class="mt-10 increment-btn" @click="increment">increment state.count</button>
<button class="mt-10 trigger-ref-btn" @click="triggerRefState">triggerRef state</button>
</view>
</template>
<template>
<view class="page">
<view class="flex justify-between flex-row mb-10">
<text>state.count:</text>
<text id="state-count">{{ state['count'] }}</text>
</view>
<button class="mb-10 increment-btn" @click="increment">
increment state.count
</button>
<button class="mb-10 trigger-ref-btn" @click="triggerRefState">
triggerRef state
</button>
</view>
</template>
<script setup>
const useCustomRef = (value : UTSJSONObject) : Ref<UTSJSONObject> => {
// @ts-ignore
return customRef<UTSJSONObject>((track, trigger) : UTSJSONObject => {
return {
get() : UTSJSONObject {
track()
return value
},
set(newValue : UTSJSONObject) {
value = newValue
trigger()
}
} as UTSJSONObject
})
}
<script setup lang="uts">
const useCustomRef = (value : UTSJSONObject) : Ref<UTSJSONObject> => {
// @ts-ignore
return customRef<UTSJSONObject>((track, trigger) : UTSJSONObject => {
return {
get() : UTSJSONObject {
track()
return value
},
set(newValue : UTSJSONObject) {
value = newValue
trigger()
}
} as UTSJSONObject
})
}
const state = useCustomRef({ count: 0 } as UTSJSONObject)
const state = useCustomRef({ count: 0 } as UTSJSONObject)
const increment = () => {
(state.value as UTSJSONObject)['count'] = ((state.value as UTSJSONObject)['count'] as number) + 1
}
const triggerRefState = () => {
triggerRef(state)
}
</script>
\ No newline at end of file
const increment = () => {
(state.value as UTSJSONObject)['count'] = ((state.value as UTSJSONObject)['count'] as number) + 1
}
const triggerRefState = () => {
triggerRef(state)
}
</script>
......@@ -140,7 +140,7 @@ function transform(fileInfo, api) {
- [x] toValue
- [x] unRef
- [ ] customRef
- [x] customRef
- [ ] effectScope
- [ ] getCurrentScope
- [ ] markRaw
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册