千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

p 25 025-计算属性-很聪明会缓存

计算属性：是在 Vue.js 中用于处理基于已有数据派生出的衍生数据的一种方式。旨在简化数据计算和处理的过程，并提高代码的可读性和可维护性。

经过学习，发现计算属性使用起来类似于普通的数据属性，但有几个重要的区别：

1.声明方式：计算属性是在 Vue 组件的计算属性对象中定义的。通过在组件选项中添加一个 computed 对象，可以在其中定义计算属性的名称和相应的处理函数。

2.自动依赖追踪：计算属性会自动追踪其依赖的响应式数据。当依赖的数据发生变化时，计算属性会重新计算，并更新相关的 DOM。

3.缓存机制：计算属性默认具有缓存机制，即只有在依赖的数据发生变化时才会重新计算。在数据没有发生变化时，计算属性会返回上一次的计算结果，从而避免不必要的计算开销。

4.使用方式：在模板中使用计算属性时，可以像使用普通属性一样直接引用计算属性的名称。Vue 会自动处理计算属性的求值和更新。

通过使用计算属性，可以将复杂的数据计算逻辑封装起来，使组件中的模板代码更加简洁和可读。它们对于基于多个响应式数据计算衍生数据、格式化数据、过滤数据等场景非常有用，避免了在模板中编写复杂的计算逻辑。

需要注意的是，计算属性是基于已有响应式数据的派生，而不是用于修改数据。如果需要修改数据，应该使用对应的 setter 函数或使用方法（methods）来实现。

总结起来，计算属性是一种用于处理衍生数据的机制，具有自动依赖追踪和缓存的特性。它们通过将复杂的数据计算逻辑抽象成属性，在组件中提供了更简洁和可维护的代码方式。