【ArkTS】Watch装饰器
2023-12-20 22:00:09
@Watch装饰器,相当于Vue中的监听器 以及 React中使用useEffect监听变量
使用@Watch装饰器,可以监听一个数据的变化,并进行后续的响应。
使用方法:
@Watch(‘回调函数’),写在@State装饰器后(其实写在前面也行,但是写到后面更加清晰也符合规范)。
@State @Watch('change') baseNumber: number = 1
change(){
this.res = Math.pow(this.baseNumber,this.pow)
}
注意
:回调函数中一定不能直接操作监听的数据,会造成死循环
下面是一个综合案例
@Entry
@Component
struct UseWatch {
// 将监听器写到@State装饰器后面
@State @Watch('change') baseNumber: number = 1
@State pow: number = 2
@State res: number = 1
change(){
this.res = Math.pow(this.baseNumber,this.pow)
}
build() {
Column(){
Text(`基数:${this.baseNumber}`)
.fontSize(40)
.onClick(() => {
this.baseNumber++
})
Divider()
Text(`次幂:${this.pow}`)
.fontSize(40)
.onClick(() => {
this.pow ++
})
Divider()
Text(`结果:${this.res}`)
.fontSize(40)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
运行发现,点击 基数 时,即@Watch监听的数据发生变化时,执行了change函数
但是点击 次幂 时,由于@Watch监听的数据未发生改变,所以没执行change函数
再次点击 基数 时,重新执行change函数
文章来源:https://blog.csdn.net/owo_ovo/article/details/135036874
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!