news 2026/5/10 8:38:13

鸿蒙中级课程笔记2—状态管理V2—@Computed装饰器:计算属性

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
鸿蒙中级课程笔记2—状态管理V2—@Computed装饰器:计算属性

当开发者使用相同的计算逻辑重复绑定在UI上时,为了防止重复计算,可以使用@Computed计算属性。计算属性中的依赖的状态变量变化时,只会计算一次。这解决了UI多次重用该属性导致的重复计算和性能问题。如下面例子。

@Computed get sum() { return this.count1 + this.count2 + this.count3; } Text(`${this.count1 + this.count2 + this.count3}`) // 计算this.count1 + this.count2 + this.count3 Text(`${this.count1 + this.count2 + this.count3}`) // 重复计算this.count1 + this.count2 + this.count3 Text(`${this.sum}`) // 读取@Computed sum的缓存值,节省上述重复计算 Text(`${this.sum}`) // 读取@Computed sum的缓存值,节省上述重复计算

说明

@Computed装饰器从API version 12开始支持。

从API version 12开始,该装饰器支持在元服务中使用。

概述

@Computed为方法装饰器,装饰getter方法。@Computed会检测被计算的属性变化,当被计算的属性变化时,@Computed只会被求解一次。不建议在@Computed中修改变量,错误的使用会导致数据无法被追踪或appfreeze等问题,详情见使用限制。

但需要注意,对于简单计算,不建议使用计算属性,因为计算属性本身也有开销。对于复杂的计算,@Computed能带来性能收益。

装饰器说明

@Computed语法:

@Computed get varName(): T { return value; }
@Computed方法装饰器说明
支持类型getter访问器。
从父组件初始化禁止。
可初始化子组件@Param。
被执行的时机

@ComponentV2中的@Computed会在自定义组件创建的时候初始化,触发@Computed计算。

@ObservedV2装饰的类中的@Computed,会在@ObservedV2装饰的类实例创建后,异步初始化,触发@Computed计算。

在@Computed中计算的状态变量被改变时,计算属性会重新计算。

是否允许赋值@Computed装饰的属性是只读的,不允许赋值,详情见使用限制。

使用限制

参考@Computed装饰器:计算属性

  • @Computed为方法装饰器,仅能装饰getter方法,其他用法编译时报错。

  • @Computed装饰的方法只有在初始化,或者其被计算的状态变量改变时,才会发生重新计算。不建议开发者在@Computed装饰的getter方法中做除获取数据外其余的逻辑操作。

  • 在@Computed装饰的getter方法中,不能改变参与计算的属性,以防止重复执行计算属性导致的appfreeze。

  • @Computed不能和双向绑定!!连用,@Computed装饰的是getter访问器,不会被子组件同步,也不能被赋值。开发者自己实现的计算属性的setter不生效,且产生编译时报错。

    @ComponentV2 struct Child { @Param double: number = 100; @Event $double: (val: number) => void; build() { Button('ChildChange') .onClick(() => { this.$double(200); }) } } @Entry @ComponentV2 struct Index { @Local count: number = 100; @Computed get double() { return this.count * 2; } // @Computed装饰的属性是只读的,开发者自己实现的setter不生效,编译时报错。 set double(newValue : number) { this.count = newValue / 2; } build() { Scroll() { Column({ space: 3 }) { Text(`${this.count}`) // 错误写法,@Computed装饰的属性是只读的,无法与双向绑定连用,编译时报错。 Child({ double: this.double!! }) } } } }
  • @Computed为状态管理V2提供的能力,只能在@ComponentV2和@ObservedV2中使用。

  • 多个@Computed一起使用时,警惕循环求解,以防止计算过程中的死循环。

使用场景

参考@Computed装饰器:计算属性

当被计算的属性变化时,@Computed装饰的getter访问器只会被求解一次

计算属性本身会带来性能开销,在实际应用开发中需要注意:

  • 对于简单的计算逻辑,可以不使用计算属性。
  • 如果计算逻辑在视图中仅使用一次,则不使用计算属性,直接求解。

@Computed装饰的属性可以被@Monitor监听变化

@Computed装饰的属性可以初始化@Param

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/7 5:30:41

软件测试之单元测试

所谓单元测试指,指的是对软件中最小可测试单元开展细致的检查与验证工作。 具体而言,它主要用于检验单个类的准确性,确保其功能符合预期。 单元测试与集成测试、系统测试存在显著差异。它是软件开发流程中前置的测试环节,规模最…

作者头像 李华
网站建设 2026/5/5 19:39:17

day1-vue

1.vue是一个用于构建用户界面的渐进式框架构建用户界面:基于数据动态渲染页面渐进式:循序渐进框架:一套完整的项目解决方案vue使用方式:1.vue核心包开发——场景: 局部,模块改造 2.vue核心包&vu…

作者头像 李华
网站建设 2026/5/5 10:52:34

我将对国内增值税、附加税和企业所得税的计税依据、计算过程及会计分录进行详细分析和列式说明

国内增值税、附加税和企业所得税的计税依据、计算过程及会计分录进行详细分析和列式说明。核心要点概述增值税:属于“价外税”,针对货物、劳务、服务等在流转环节的增值额征税,采用抵扣制。附加税:属于“价内税”,以实…

作者头像 李华
网站建设 2026/5/5 19:38:41

巴菲特的投资智慧与资本增值

巴菲特的投资智慧与资本增值 关键词:巴菲特、投资智慧、资本增值、价值投资、长期投资 摘要:本文深入探讨了巴菲特的投资智慧及其对资本增值的影响。通过对巴菲特投资理念、核心概念、算法原理、数学模型等多方面的剖析,结合实际案例展示了如何运用其智慧实现资本增值。同时…

作者头像 李华
网站建设 2026/5/8 13:25:05

费雪的创新型公司识别方法

费雪的创新型公司识别方法 关键词:费雪、创新型公司、识别方法、投资分析、公司评估 摘要:本文深入探讨了费雪的创新型公司识别方法。首先介绍了该方法的背景,包括其目的、预期读者和文档结构等内容。接着阐述了核心概念,展示了概念原理和架构的文本示意图与 Mermaid 流程图…

作者头像 李华
网站建设 2026/5/9 23:25:20

AI的“语言的流利度”不能等同于“思想的深度”

以下是为什么说我们可能“误会”了 AI 的三个核心真相:1. 它是“概率机器”,不是“逻辑器官”人类的智能是**“自顶向下”的:我们先有目标、有逻辑、有对世界的物理感知,最后才用语言表达出来。 而 AI(Transformer&…

作者头像 李华