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

refactor(reactivity): effectScope

......@@ -581,6 +581,11 @@ export default {
name: 'customRef',
url: 'custom-ref/custom-ref'
},
{
id: 'effect-scope',
name: 'effectScope',
url: 'effect-scope/effect-scope'
},
]
}
] as Page[]
......
const PAGE_PATH = '/pages/composition-api/reactivity/effect-scope/effect-scope'
const PAGE_PATH = '/pages/reactivity/advanced/effect-scope/effect-scope'
describe('effectScope', () => {
const isWeb = process.env.uniTestPlatformInfo.startsWith('web')
let page = null
let page = null
const platformInfo = process.env.uniTestPlatformInfo.toLowerCase()
const isAndroid = platformInfo.startsWith('android')
const isIos = platformInfo.startsWith('ios')
const isWeb = platformInfo.startsWith('web')
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor('view')
})
it('basic', async () => {
const counter = await page.$('#counter')
expect(await counter.text()).toBe('counter: 0')
expect(await counter.text()).toBe('0')
const watchCounterRes = await page.$('#watch-counter-res')
expect(await watchCounterRes.text()).toBe(isWeb ? 'watch counter result:' : 'watch counter result: ')
const watchCounterRes = await page.$('#watch-counter-res')
if(isAndroid || isWeb){
expect(await watchCounterRes.text()).toBe('')
}
if(isIos){
expect(await watchCounterRes.text()).toBe(null)
}
const watchEffectCounterRes = await page.$('#watch-effect-counter-res')
expect(await watchEffectCounterRes.text()).toBe('watchEffect counter result: counter: 0')
expect(await watchEffectCounterRes.text()).toBe('counter: 0')
const incrementCounterBtn = await page.$('#increment-counter-btn')
await incrementCounterBtn.tap()
expect(await counter.text()).toBe('counter: 1')
expect(await watchCounterRes.text()).toBe('watch counter result: newVal: 1, oldVal: 0')
expect(await watchEffectCounterRes.text()).toBe('watchEffect counter result: counter: 1')
expect(await counter.text()).toBe('1')
expect(await watchCounterRes.text()).toBe('newVal: 1, oldVal: 0')
expect(await watchEffectCounterRes.text()).toBe('counter: 1')
const stopEffectScopeBtn = await page.$('#stop-effect-scope-btn')
await stopEffectScopeBtn.tap()
await incrementCounterBtn.tap()
expect(await counter.text()).toBe('counter: 2')
expect(await watchCounterRes.text()).toBe('watch counter result: newVal: 1, oldVal: 0')
expect(await watchEffectCounterRes.text()).toBe('watchEffect counter result: counter: 1')
expect(await counter.text()).toBe('2')
expect(await watchCounterRes.text()).toBe('newVal: 1, oldVal: 0')
expect(await watchEffectCounterRes.text()).toBe('counter: 1')
})
})
\ No newline at end of file
<template>
<view class="page">
<text id="counter">counter: {{ counter }}</text>
<text id="watch-counter-res" class="mt-10">watch counter result: {{ watchCounterRes }}</text>
<text id="watch-effect-counter-res" class="mt-10">watchEffect counter result:
{{ watchEffectCounterRes }}</text>
<button id="increment-counter-btn" class="mt-10" @click="() => {counter++}">increment counter</button>
<button id="stop-effect-scope-btn" class="mt-10" @click="stopEffectScope">stop effect scope</button>
<view class="flex justify-between flex-row mb-10">
<text>counter:</text>
<text id="counter">{{ counter }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>watch counter result:</text>
<text id="watch-counter-res">{{ watchCounterRes }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>watchEffect counter result:</text>
<text id="watch-effect-counter-res">{{ watchEffectCounterRes }}</text>
</view>
<button
id="increment-counter-btn"
class="mt-10"
@click="
() => {
counter++;
}
">
increment counter
</button>
<button id="stop-effect-scope-btn" class="mt-10" @click="stopEffectScope">
stop effect scope
</button>
</view>
</template>
<script setup>
const scope = effectScope()
<script setup lang="uts">
const scope = effectScope()
const counter = ref(0)
const counter = ref(0)
const watchCounterRes = ref('')
const watchCounterRes = ref('')
const watchEffectCounterRes = ref('')
const watchEffectCounterRes = ref('')
scope.run(() => {
watch(counter, (newVal : number, oldVal : number) => {
watchCounterRes.value = `newVal: ${newVal}, oldVal: ${oldVal}`
})
scope.run(() => {
watch(counter, (newVal : number, oldVal : number) => {
watchCounterRes.value = `newVal: ${newVal}, oldVal: ${oldVal}`
})
watchEffect(() => {
watchEffectCounterRes.value = `counter: ${counter.value}`
})
watchEffect(() => {
watchEffectCounterRes.value = `counter: ${counter.value}`
})
})
const stopEffectScope = () => scope.stop()
</script>
\ No newline at end of file
const stopEffectScope = () => scope.stop()
</script>
......@@ -141,7 +141,7 @@ function transform(fileInfo, api) {
- [x] unRef
- [x] customRef
- [ ] effectScope
- [x] effectScope
- [ ] getCurrentScope
- [ ] markRaw
- [ ] onScopeDispose
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册
新手
引导
客服 返回
顶部