Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 349
Star 2
Fork 7
H
hello-uvue
提交 8d968cfd 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

refactor(composition api): 优化 watch 相关示例及测试

上级 4d404eb0
显示空白变更内容
内联 并排
Showing with 108 addition and 132 deletion
pages/composition-api/reactivity/watch-effect/watch-effect.test.js
浏览文件 @ 8d968cfd
......@@ -12,14 +12,8 @@ describe('watchEffect', () => {
// watch
const watchCountRes = await page.$('#watch-count-res')
if (process.env.uniTestPlatformInfo.startsWith('android')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 0, count ref text (flush sync): count: 0')
}
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 0, count ref text (flush sync): null')
}
// track
const watchCountTrackNum = await page.$('#watch-count-track-num')
expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
......@@ -38,14 +32,8 @@ describe('watchEffect', () => {
await incrementBtn.tap()
expect(await count.text()).toBe('count: 1')
if (process.env.uniTestPlatformInfo.startsWith('android')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 1, count ref text (flush sync): count: 0')
}
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 1, count ref text (flush sync): null')
}
expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 1')
......@@ -55,14 +43,9 @@ describe('watchEffect', () => {
await incrementBtn.tap()
expect(await count.text()).toBe('count: 2')
if (process.env.uniTestPlatformInfo.startsWith('android')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 2, count ref text (flush sync): count: 1')
}
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 2, count ref text (flush sync): null')
}
expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 3')
expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
......@@ -76,14 +59,9 @@ describe('watchEffect', () => {
await incrementBtn.tap()
expect(await count.text()).toBe('count: 3')
if (process.env.uniTestPlatformInfo.startsWith('android')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 2, count ref text (flush sync): count: 1')
}
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 2, count ref text (flush sync): null')
}
expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 3')
expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
......@@ -110,23 +88,13 @@ describe('watchEffect', () => {
'watch obj result: obj: {"num":0,"str":"num: 0","bool":false,"arr":[0]}')
}
const watchObjStrRes = await page.$('#watch-obj-str-res')
if (process.env.uniTestPlatformInfo.startsWith('android')) {
expect(await watchObjStrRes.text()).toBe(
'watch obj.str result: str: num: 0, obj.str ref text (flush pre): obj.str: num: 0')
}
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await watchObjStrRes.text()).toBe(
'watch obj.str result: str: num: 0, obj.str ref text (flush pre): null')
}
const watchObjBoolRes = await page.$('#watch-obj-bool-res')
if (process.env.uniTestPlatformInfo.startsWith('android')) {
expect(await watchObjBoolRes.text()).toBe(
'watch obj.bool result: bool: false, obj.bool ref text (flush post): obj.bool: false')
}
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await watchObjBoolRes.text()).toBe(
'watch obj.bool result: bool: false, obj.bool ref text (flush post): null')
}
const watchObjArrRes = await page.$('#watch-obj-arr-res')
expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0]')
......@@ -146,22 +114,11 @@ describe('watchEffect', () => {
expect(await watchObjRes.text()).toBe(
'watch obj result: obj: {"num":1,"str":"num: 1","bool":true,"arr":[0,1]}')
}
if (process.env.uniTestPlatformInfo.startsWith('android')) {
expect(await watchObjStrRes.text()).toBe(
'watch obj.str result: str: num: 1, obj.str ref text (flush pre): obj.str: num: 0')
}
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await watchObjStrRes.text()).toBe(
'watch obj.str result: str: num: 1, obj.str ref text (flush pre): null')
}
if (process.env.uniTestPlatformInfo.startsWith('android')) {
expect(await watchObjBoolRes.text()).toBe(
'watch obj.bool result: bool: true, obj.bool ref text (flush post): obj.bool: true')
}
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await watchObjBoolRes.text()).toBe(
'watch obj.bool result: bool: true, obj.bool ref text (flush post): null')
}
expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0,1]')
const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
......
pages/composition-api/reactivity/watch-effect/watch-effect.uvue
浏览文件 @ 8d968cfd
......@@ -43,7 +43,7 @@
arr : number[]
}
const countRef = ref<UniElement | null>(null)
const countRef = ref<UniTextElement | null>(null)
const count = ref(0)
const watchCountRes = ref('')
const watchCountCleanupRes = ref('')
......@@ -52,7 +52,12 @@
const stopWatchCount = watchEffect((onCleanup : OnCleanup) => {
if (countRef.value !== null) {
watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${countRef.value!.getAttribute('value')}`
// #ifdef APP
watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${countRef.value!.value}`
// #endif
// #ifdef WEB
watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`
// #endif
} else {
watchCountRes.value = `count: ${count.value}, count ref text (flush sync): `
}
......@@ -95,11 +100,16 @@
watchObjRes.value = `obj: ${JSON.stringify(obj)}`
})
const objStrRef = ref<UniElement | null>(null)
const objStrRef = ref<UniTextElement | null>(null)
const watchObjStrRes = ref('')
watchEffect(() => {
if (objStrRef.value !== null) {
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${objStrRef.value!.getAttribute('value')}`
// #ifdef APP
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${objStrRef.value!.value}`
// #endif
// #ifdef WEB
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`
// #endif
} else {
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): `
}
......@@ -108,11 +118,16 @@
flush: 'pre',
})
const objBoolRef = ref<UniElement | null>(null)
const objBoolRef = ref<UniTextElement | null>(null)
const watchObjBoolRes = ref('')
watchEffect(() => {
if (objBoolRef.value !== null) {
watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${objBoolRef.value!.getAttribute('value')}`
// #ifdef APP
watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${objBoolRef.value!.value}`
// #endif
// #ifdef WEB
watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${(objBoolRef.value!.childNodes[0] as HTMLElement).innerText}`
// #endif
} else {
watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): `
}
......
pages/composition-api/reactivity/watch-post-effect/watch-post-effect.uvue
浏览文件 @ 8d968cfd
......@@ -42,7 +42,7 @@
arr : number[]
}
const countRef = ref<UniElement | null>(null)
const countRef = ref<UniTextElement | null>(null)
const count = ref<number>(0)
const watchCountRes = ref('')
const watchCountCleanupRes = ref('')
......@@ -51,7 +51,12 @@
const stopWatchCount = watchPostEffect((onCleanup : OnCleanup) => {
if (countRef.value !== null) {
watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.getAttribute('value')}`
// #ifdef APP
watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.value}`
// #endif
// #ifdef WEB
watchCountRes.value = `count: ${count.value}, count ref text: ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`
// #endif
} else {
watchCountRes.value = `count: ${count.value}, count ref text: `
}
......@@ -94,11 +99,16 @@
watchObjRes.value = `obj: ${JSON.stringify(obj)}`
})
const objStrRef = ref<UniElement | null>(null)
const objStrRef = ref<UniTextElement | null>(null)
const watchObjStrRes = ref('')
watchPostEffect(() => {
if (objStrRef.value !== null) {
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${objStrRef.value!.getAttribute('value')}`
// #ifdef APP
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${objStrRef.value!.value}`
// #endif
// #ifdef WEB
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`
// #endif
} else {
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: `
}
......
pages/composition-api/reactivity/watch-sync-effect/watch-sync-effect.uvue
浏览文件 @ 8d968cfd
......@@ -42,7 +42,7 @@
arr : number[]
}
const countRef = ref<UniElement | null>(null)
const countRef = ref<UniTextElement | null>(null)
const count = ref(0)
const watchCountRes = ref('')
const watchCountCleanupRes = ref('')
......@@ -51,12 +51,17 @@
const stopWatchCount = watchSyncEffect((onCleanup : OnCleanup) => {
if (countRef.value !== null) {
watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.getAttribute('value')}`
// #ifdef APP
watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.value}`
// #endif
// #ifdef WEB
watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.childNodes[0] as HTMLElement).innerText}`
// #endif
} else {
watchCountRes.value = `count: ${count.value}, count ref text: `
watchCountRes.value = `count: ${ count.value }, count ref text: `
}
const cancel = () => {
watchCountCleanupRes.value = `watch count cleanup: ${count.value}`
watchCountCleanupRes.value = `watch count cleanup: ${ count.value }`
}
onCleanup(cancel)
},
......@@ -91,32 +96,37 @@
const watchObjRes = ref('')
watchSyncEffect(() => {
watchObjRes.value = `obj: ${JSON.stringify(obj)}`
watchObjRes.value = `obj: ${ JSON.stringify(obj) }`
})
const objStrRef = ref<UniElement | null>(null)
const objStrRef = ref<UniTextElement | null>(null)
const watchObjStrRes = ref('')
watchSyncEffect(() => {
if (objStrRef.value !== null) {
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${objStrRef.value!.getAttribute('value')}`
// #ifdef APP
watchObjStrRes.value = `str: ${ obj.str }, obj.str ref text: ${ objStrRef.value!.value }`
// #endif
// #ifdef WEB
watchObjStrRes.value = `str: ${ obj.str }, obj.str ref text: ${ (objStrRef.value!.childNodes[0] as HTMLElement).innerText }`
// #endif
} else {
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: `
watchObjStrRes.value = `str: ${ obj.str }, obj.str ref text: `
}
})
const watchObjArrRes = ref('')
watchSyncEffect(() => {
watchObjArrRes.value = `arr: ${JSON.stringify(obj.arr)}`
watchObjArrRes.value = `arr: ${ JSON.stringify(obj.arr) }`
})
const watchCountAndObjNumRes = ref('')
watchSyncEffect(() => {
watchCountAndObjNumRes.value = `count: ${count.value}, obj.num: ${obj.num}`
watchCountAndObjNumRes.value = `count: ${ count.value }, obj.num: ${ obj.num }`
})
const updateObj = () => {
obj.num++
obj.str = `num: ${obj.num}`
obj.str = `num: ${ obj.num }`
obj.bool = !obj.bool
obj.arr.push(obj.num)
}
......
pages/composition-api/reactivity/watch/watch.test.js
浏览文件 @ 8d968cfd
......@@ -33,14 +33,8 @@ describe('watch', () => {
expect(await count.text()).toBe('count: 1')
if (process.env.uniTestPlatformInfo.startsWith('android')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 1, prevCount: 0, count ref text (flush sync): count: 0')
}
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 1, prevCount: 0, count ref text (flush sync): null')
}
expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 1')
......@@ -52,15 +46,8 @@ describe('watch', () => {
await incrementBtn.tap()
expect(await count.text()).toBe('count: 2')
if (process.env.uniTestPlatformInfo.startsWith('android')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 2, prevCount: 1, count ref text (flush sync): count: 1')
}
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 2, prevCount: 1, count ref text (flush sync): null')
}
expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 1')
......@@ -77,14 +64,8 @@ describe('watch', () => {
await incrementBtn.tap()
expect(await count.text()).toBe('count: 3')
if (process.env.uniTestPlatformInfo.startsWith('android')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 2, prevCount: 1, count ref text (flush sync): count: 1')
}
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await watchCountRes.text()).toBe(
'watch count result: count: 2, prevCount: 1, count ref text (flush sync): null')
}
expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
......@@ -138,24 +119,12 @@ describe('watch', () => {
'watch obj result: obj: {"num":1,"str":"num: 1","bool":true,"arr":[0,1]}, prevObj: {"num":1,"str":"num: 1","bool":true,"arr":[0,1]}'
)
}
if (process.env.uniTestPlatformInfo.startsWith('android')) {
expect(await watchObjStrRes.text()).toBe(
'watch obj.str result: str: num: 1, prevStr: num: 0, obj.str ref text (flush pre): obj.str: num: 0')
}
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await watchObjStrRes.text()).toBe(
'watch obj.str result: str: num: 1, prevStr: num: 0, obj.str ref text (flush pre): null')
}
if (process.env.uniTestPlatformInfo.startsWith('android')) {
expect(await watchObjBoolRes.text()).toBe(
'watch obj.bool result: bool: true, prevBool: false, obj.bool ref text (flush post): obj.bool: true'
)
}
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await watchObjBoolRes.text()).toBe(
'watch obj.bool result: bool: true, prevBool: false, obj.bool ref text (flush post): null')
}
expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0,1], prevArr: [0,1]')
const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
......
pages/composition-api/reactivity/watch/watch.uvue
浏览文件 @ 8d968cfd
......@@ -43,7 +43,7 @@
arr : number[]
}
const countRef = ref<UniElement | null>(null)
const countRef = ref<UniTextElement | null>(null)
const count = ref(0)
const watchCountRes = ref('')
const watchCountCleanupRes = ref('')
......@@ -51,7 +51,12 @@
const watchCountTriggerNum = ref(0)
const stopWatchCount = watch(count, (count : number, prevCount : number, onCleanup : OnCleanup) => {
watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${countRef.value!.getAttribute('value')}`
// #ifdef APP
watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${countRef.value!.value}`
// #endif
// #ifdef WEB
watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`
// #endif
const cancel = () => {
watchCountCleanupRes.value = `watch count cleanup: ${count}`
}
......@@ -88,23 +93,33 @@
// immediate: true 第一次触发, 旧值应该是 undefined, 现在 app 是初始值
const watchObjRes = ref('')
watch(obj, (obj : Obj, prevObj?: Obj) => {
watch(obj, (obj : Obj, prevObj ?: Obj) => {
watchObjRes.value = `obj: ${JSON.stringify(obj)}, prevObj: ${JSON.stringify(prevObj)}`
}, { immediate: true })
const objStrRef = ref<UniElement | null>(null)
const objStrRef = ref<UniTextElement | null>(null)
const watchObjStrRes = ref('')
watch(() : string => obj.str, (str : string, prevStr : string) => {
watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${objStrRef.value!.getAttribute('value')}`
// #ifdef APP
watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${objStrRef.value!.value}`
// #endif
// #ifdef WEB
watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`
// #endif
}, {
// 侦听器在组件渲染之前触发
flush: 'pre',
})
const objBoolRef = ref<UniElement | null>(null)
const objBoolRef = ref<UniTextElement | null>(null)
const watchObjBoolRes = ref('')
watch(() : boolean => obj.bool, (bool : boolean, prevBool : boolean) => {
watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${objBoolRef.value!.getAttribute('value')}`
// #ifdef APP
watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${objBoolRef.value!.value}`
// #endif
// #ifdef WEB
watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${(objBoolRef.value!.childNodes[0] as HTMLElement).innerText}`
// #endif
}, {
// 侦听器延迟到组件渲染之后触发
flush: 'post'
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或