You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular变更检测:硬编码数组的includes表达式是否每次都会执行?

Angular变更检测中*ngSwitchCase表达式的求值逻辑

是的,每次Angular变更检测运行时,这行代码里的表达式都会被完整求值,原因如下:

  • 表达式里每次都会创建一个新的数组实例['abc', '123'],接着调用includes方法判断item.field是否匹配,最后返回对应的字符串结果。
  • Angular的变更检测机制会在触发时机(比如用户交互、异步操作完成、定时器触发等)重新计算模板中所有绑定的表达式,通过对比前后值的变化来决定是否更新视图。哪怕数组是硬编码的固定值,每次计算都会生成新的数组实例,整个表达式也会被重新执行一遍。

这种写法存在性能浪费,因为每次变更检测都要重复创建数组并执行判断逻辑。如果要优化,可以把数组提取到组件类中作为静态属性:

// 组件类代码
readonly targetValues = ['abc', '123'];

然后模板修改为:

*ngSwitchCase="targetValues.includes(item.field)? 'test': ''"

这样每次变更检测时不会重复创建数组,能减少不必要的性能开销。

内容的提问来源于stack exchange,提问作者DBK

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.07 19:02:01