Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello-uvue
提交
8bfaf7a6
H
hello-uvue
项目概览
DCloud
/
hello-uvue
通知
350
Star
2
Fork
7
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello-uvue
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
8bfaf7a6
编写于
1月 18, 2024
作者:
DCloud-WZF
💬
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(composition api): watchPostEffect
上级
b24e757c
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
236 addition
and
2 deletion
+236
-2
pages/composition-api/reactivity/watch-post-effect/watch-post-effect.test.js
...pi/reactivity/watch-post-effect/watch-post-effect.test.js
+112
-0
pages/composition-api/reactivity/watch-post-effect/watch-post-effect.uvue
...n-api/reactivity/watch-post-effect/watch-post-effect.uvue
+123
-1
pages/tab-bar/composition-api.uvue
pages/tab-bar/composition-api.uvue
+1
-1
未找到文件。
pages/composition-api/reactivity/watch-post-effect/watch-post-effect.test.js
0 → 100644
浏览文件 @
8bfaf7a6
const
PAGE_PATH
=
'
/pages/composition-api/reactivity/watch-post-effect/watch-post-effect
'
describe
(
'
watchPostEffect
'
,
()
=>
{
if
(
process
.
env
.
uniTestPlatformInfo
.
startsWith
(
'
android
'
))
{
let
page
=
null
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
PAGE_PATH
)
await
page
.
waitFor
(
'
view
'
)
})
it
(
'
count
'
,
async
()
=>
{
const
count
=
await
page
.
$
(
'
#count
'
)
expect
(
await
count
.
text
()).
toBe
(
'
count: 0
'
)
// watch
const
watchCountRes
=
await
page
.
$
(
'
#watch-count-res
'
)
expect
(
await
watchCountRes
.
text
()).
toBe
(
'
watch count result: count: 0, count ref text: count: 0
'
)
// track
const
watchCountTrackNum
=
await
page
.
$
(
'
#watch-count-track-num
'
)
expect
(
await
watchCountTrackNum
.
text
()).
toBe
(
'
watch count track number: 3
'
)
// trigger
const
watchCountTriggerNum
=
await
page
.
$
(
'
#watch-count-trigger-num
'
)
expect
(
await
watchCountTriggerNum
.
text
()).
toBe
(
'
watch count trigger number: 0
'
)
const
watchCountCleanupRes
=
await
page
.
$
(
'
#watch-count-cleanup-res
'
)
expect
(
await
watchCountCleanupRes
.
text
()).
toBe
(
'
watch count cleanup result:
'
)
// watch count and obj.num
const
watchCountAndObjNumRes
=
await
page
.
$
(
'
#watch-count-obj-num-res
'
)
expect
(
await
watchCountAndObjNumRes
.
text
()).
toBe
(
'
watch count and obj.num result: count: 0, obj.num: 0
'
)
const
incrementBtn
=
await
page
.
$
(
'
#increment-btn
'
)
await
incrementBtn
.
tap
()
expect
(
await
count
.
text
()).
toBe
(
'
count: 1
'
)
expect
(
await
watchCountRes
.
text
()).
toBe
(
'
watch count result: count: 1, count ref text: count: 1
'
)
expect
(
await
watchCountTrackNum
.
text
()).
toBe
(
'
watch count track number: 3
'
)
expect
(
await
watchCountTriggerNum
.
text
()).
toBe
(
'
watch count trigger number: 1
'
)
expect
(
await
watchCountCleanupRes
.
text
()).
toBe
(
'
watch count cleanup result: watch count cleanup: 1
'
)
expect
(
await
watchCountAndObjNumRes
.
text
()).
toBe
(
'
watch count and obj.num result: count: 1, obj.num: 0
'
)
await
incrementBtn
.
tap
()
expect
(
await
count
.
text
()).
toBe
(
'
count: 2
'
)
expect
(
await
watchCountRes
.
text
()).
toBe
(
'
watch count result: count: 2, count ref text: count: 2
'
)
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: 2
'
)
expect
(
await
watchCountAndObjNumRes
.
text
()).
toBe
(
'
watch count and obj.num result: count: 2, obj.num: 0
'
)
// stop watch
const
stopWatchCountBtn
=
await
page
.
$
(
'
#stop-watch-count-btn
'
)
await
stopWatchCountBtn
.
tap
()
await
incrementBtn
.
tap
()
expect
(
await
count
.
text
()).
toBe
(
'
count: 3
'
)
expect
(
await
watchCountRes
.
text
()).
toBe
(
'
watch count result: count: 2, count ref text: count: 2
'
)
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: 2
'
)
expect
(
await
watchCountAndObjNumRes
.
text
()).
toBe
(
'
watch count and obj.num result: count: 3, obj.num: 0
'
)
})
it
(
'
obj
'
,
async
()
=>
{
const
objStr
=
await
page
.
$
(
'
#obj-str
'
)
expect
(
await
objStr
.
text
()).
toBe
(
'
obj.str: num: 0
'
)
const
objNum
=
await
page
.
$
(
'
#obj-num
'
)
expect
(
await
objNum
.
text
()).
toBe
(
'
obj.num: 0
'
)
const
objBool
=
await
page
.
$
(
'
#obj-bool
'
)
expect
(
await
objBool
.
text
()).
toBe
(
'
obj.bool: false
'
)
const
objArr
=
await
page
.
$
(
'
#obj-arr
'
)
expect
(
await
objArr
.
text
()).
toBe
(
'
obj.arr: [0]
'
)
const
watchObjRes
=
await
page
.
$
(
'
#watch-obj-res
'
)
expect
(
await
watchObjRes
.
text
()).
toBe
(
'
watch obj result: obj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}
'
)
const
watchObjStrRes
=
await
page
.
$
(
'
#watch-obj-str-res
'
)
expect
(
await
watchObjStrRes
.
text
()).
toBe
(
'
watch obj.str result: str: num: 0, obj.str ref text: obj.str: num: 0
'
)
const
watchObjArrRes
=
await
page
.
$
(
'
#watch-obj-arr-res
'
)
expect
(
await
watchObjArrRes
.
text
()).
toBe
(
'
watch obj.arr result: arr: [0]
'
)
const
updateObjBtn
=
await
page
.
$
(
'
#update-obj-btn
'
)
await
updateObjBtn
.
tap
()
expect
(
await
objStr
.
text
()).
toBe
(
'
obj.str: num: 1
'
)
expect
(
await
objNum
.
text
()).
toBe
(
'
obj.num: 1
'
)
expect
(
await
objBool
.
text
()).
toBe
(
'
obj.bool: true
'
)
expect
(
await
objArr
.
text
()).
toBe
(
'
obj.arr: [0,1]
'
)
expect
(
await
watchObjRes
.
text
()).
toBe
(
'
watch obj result: obj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}
'
)
expect
(
await
watchObjStrRes
.
text
()).
toBe
(
'
watch obj.str result: str: num: 1, obj.str ref text: obj.str: num: 1
'
)
expect
(
await
watchObjArrRes
.
text
()).
toBe
(
'
watch obj.arr result: arr: [0,1]
'
)
const
watchCountAndObjNumRes
=
await
page
.
$
(
'
#watch-count-obj-num-res
'
)
expect
(
await
watchCountAndObjNumRes
.
text
()).
toBe
(
'
watch count and obj.num result: count: 3, obj.num: 1
'
)
})
}
else
{
it
(
'
other platform
'
,
()
=>
{
expect
(
1
).
toBe
(
1
)
})
}
})
\ No newline at end of file
pages/composition-api/reactivity/watch-post-effect/watch-post-effect.uvue
浏览文件 @
8bfaf7a6
<template><view class="page">watchPostEffect</view></template>
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1; padding-bottom: 20px">
<!-- #endif -->
<view class="page">
<text id="count" ref="countRef" class="uni-common-mb">count: {{ count }}</text>
<text id="watch-count-res" class="uni-common-mb">watch count result: {{ watchCountRes }}</text>
<text id="watch-count-track-num" class="uni-common-mb">watch count track number: {{ watchCountTrackNum }}</text>
<text id="watch-count-trigger-num" class="uni-common-mb">watch count trigger number:
{{ watchCountTriggerNum }}</text>
<text id="watch-count-cleanup-res" class="uni-common-mb">watch count cleanup result:
{{ watchCountCleanupRes }}</text>
<button id="increment-btn" class="uni-common-mb" @click="increment">
increment
</button>
<button id="stop-watch-count-btn" class="uni-common-mb" @click="triggerStopWatchCount">
stop watch count
</button>
<text id="obj-str" ref="objStrRef" class="uni-common-mb">obj.str: {{ obj.str }}</text>
<text id="obj-num" class="uni-common-mb">obj.num: {{ obj.num }}</text>
<text id="obj-bool" ref="objBoolRef" class="uni-common-mb">obj.bool: {{ obj.bool }}</text>
<text id="obj-arr" ref="objArrRef" class="uni-common-mb">obj.arr: {{ obj.arr }}</text>
<text id="watch-obj-res" class="uni-common-mb">watch obj result: {{ watchObjRes }}</text>
<text id="watch-obj-str-res" class="uni-common-mb">watch obj.str result: {{ watchObjStrRes }}</text>
<text id="watch-obj-arr-res" class="uni-common-mb">watch obj.arr result: {{ watchObjArrRes }}</text>
<button id="update-obj-btn" class="uni-common-mb" @click="updateObj">
update obj
</button>
<text id="watch-count-obj-num-res" class="uni-common-mb">watch count and obj.num result:
{{ watchCountAndObjNumRes }}</text>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script setup>
type Obj = {
num : number,
str : string,
bool : boolean,
arr : number[]
}
const countRef = ref(null)
const count = ref<number>(0)
const watchCountRes = ref('')
const watchCountCleanupRes = ref('')
const watchCountTrackNum = ref(0)
const watchCountTriggerNum = ref(0)
const stopWatchCount = watchPostEffect((onCleanup : OnCleanup) => {
if (countRef.value !== null) {
watchCountRes.value = `count: ${count.value}, count ref text: ${(countRef.value as Element).getAttribute('value')}`
} else {
watchCountRes.value = `count: ${count.value}, count ref text: `
}
const cancel = () => {
watchCountCleanupRes.value = `watch count cleanup: ${count.value}`
}
onCleanup(cancel)
},
{
// 响应属性或引用作为依赖项被跟踪时调用
onTrack(event : DebuggerEvent) {
if (event.type === 'get') {
watchCountTrackNum.value++
}
},
// 侦听器回调被依赖项的变更触发时调用
onTrigger(event : DebuggerEvent) {
if (event.type === 'set') {
watchCountTriggerNum.value++
}
}
},
)
const triggerStopWatchCount = () => stopWatchCount()
const increment = () => {
count.value++
}
const obj = reactive({
num: 0,
str: 'num: 0',
bool: false,
arr: [0]
} as Obj)
const watchObjRes = ref('')
watchPostEffect(() => {
watchObjRes.value = `obj: ${JSON.stringify(obj)}`
})
const objStrRef = ref(null)
const watchObjStrRes = ref('')
watchPostEffect(() => {
if (objStrRef.value !== null) {
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${(objStrRef.value as Element).getAttribute('value')}`
} else {
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: `
}
})
const watchObjArrRes = ref('')
watchPostEffect(() => {
watchObjArrRes.value = `arr: ${JSON.stringify(obj.arr)}`
})
const watchCountAndObjNumRes = ref('')
watchPostEffect(() => {
watchCountAndObjNumRes.value = `count: ${count.value}, obj.num: ${obj.num}`
})
const updateObj = () => {
obj.num++
obj.str = `num: ${obj.num}`
obj.bool = !obj.bool
obj.arr.push(obj.num)
}
</script>
\ No newline at end of file
pages/tab-bar/composition-api.uvue
浏览文件 @
8bfaf7a6
...
...
@@ -116,7 +116,7 @@
{
name: 'watchPostEffect',
url: 'watch-post-effect',
enable:
fals
e,
enable:
tru
e,
},
{
name: 'watchSyncEffect',
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录