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

30. Vue计算属性Computed

1. 定义

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

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

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






2. computed和methods对比

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






computed缓存

3. Getter和Setter

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





4. Getter 不应有副作用

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

相关内容

热门资讯

微信给马化腾浇了“一盆冷水”   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会! (来源:虎嗅APP)...
做好繁荣法学研究服务法治实践工... (来源:法治日报)转自:法治日报本报讯 记者徐鹏 近日,青海省法学会第八届理事会第二次常务理事扩大会...
宝立食品拟申请银行综合授信额度... 中访网数据  上海宝立食品科技股份有限公司于2026年2月4日召开第二届董事会第十六次会议,审议通过...
强化春节前后自然灾害风险防范应... (来源:法治日报)转自:法治日报本报北京2月4日讯 记者蒋起东 国家防灾减灾救灾委员会办公室今天印发...
汲取传统文化智慧赋能基层调解工... (来源:法治日报)转自:法治日报□ 本报记者 周孝清  “有些纠纷不是简单的金钱问题,只有情感沟通与...