Vue计算属性Computed
创始人
2024-05-30 18:05:15

30. Vue计算属性Computed

1. 定义

Computed属性是Vue中的一个计算属性，是一种基于其它属性值计算而来的属性值，具有缓存机制，在依赖的属性值发生变化时会重新计算。

使用computed属性可以避免在模板中书写过多的计算逻辑，提高代码可读性和维护性。

下面是一个计算属性的示例：

2. computed和methods对比

计算属性是有缓存的, 当我们多次使用计算属性时, 计算属性中的运算只会执行一次。如下图：

computed缓存

3. Getter和Setter

计算属性默认是只读的，也就是只用到getter。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：

4. Getter 不应有副作用

需要注意的是，computed属性必须返回一个值，不能有副作用，如修改数据或触发异步操作等。如果需要有副作用的计算，可以使用watch属性。

上一篇：BSN合作伙伴大会 | 罗新荣：贸易数字化通商互信

下一篇：Python进阶-----面向对象8.0（反射---对象属性方法操作）

相关内容

热门资讯

稳固百亿基本盘！全棉时代筑牢消... 2025年，在国际贸易摩擦加剧、关税壁垒抬升，行业整体压力不减的背景下，稳健医疗（300888.SZ...
伊朗称在霍尔木兹海峡上空击落美... 人民财讯5月7日电，伊朗方面消息称，伊朗防空部队当地时间5日晚在霍尔木兹海峡上空击落了一架美军无人机...
CPO 概念行情火热 产业扩容... 5 月 7 日全球宏观盘面重磅洗牌，美元持续弱势震荡、美股全线冲高刷新历史新高，有色金属迎来强势拉升...
媒体视点 | 从“赚了多少钱”... 当新质生产力积厚成势，成为引领中国经济高质量发展的强大新引擎，中国资本市场的科技叙事逻辑更加清晰和具...
告别传统赏花！在黄浦，这十二座... （来源：上观新闻）2026年的春天，上海的城市公共空间里绽放出一片与众不同的春日胜景。新天地绿地里造...