vue之computed

发布时间 2023-06-16 09:40:30作者: 中亿丰数字科技

对Vue computed的理解

一、什么是computed

Vue的computed属性是一种计算属性,它的值是根据其他属性计算而来的。Vue会自动追踪computed属性所依赖的属性,并在这些属性发生变化时重新计算computed属性的值。

computed属性的实现原理是使用了Vue的响应式系统。当一个computed属性被访问时,Vue会检查它所依赖的属性是否发生了变化,如果发生了变化,就会重新计算computed属性的值。这个过程是通过一个依赖收集器来实现的,每个computed属性都有一个对应的Watcher对象,它会在computed属性被访问时收集所有依赖于它的属性,并在这些属性发生变化时触发更新。

computed属性的优点是可以将复杂的计算逻辑封装起来,使得代码更加简洁和易于维护。同时,由于computed属性是基于依赖的,所以它的计算结果会被缓存起来,只有在依赖的属性发生变化时才会重新计算,从而提高了性能。

二、computed使用场景

  1. 对数据进行格式化或处理,例如将日期格式化为特定的字符串格式。

  2. 对数据进行过滤或排序,例如根据某个条件对列表进行排序或过滤。

  3. 对数据进行聚合或计算,例如计算列表中所有元素的总和或平均值。

  4. 对数据进行联动或关联,例如根据某个属性的值来动态计算另一个属性的值。

  5. 对数据进行缓存或优化,例如将一些计算结果缓存起来,避免重复计算。

  6. 对数据进行动态响应,例如根据用户的输入动态计算某个属性的值。

以上是一些常见的使用场景,使用computed属性可以使代码更加简洁和易于维护。同时,由于computed属性是基于依赖的,所以它的计算结果会被缓存起来,只有在依赖的属性发生变化时才会重新计算,从而提高了性能