计算属性的定义与基本原理·快速给出答案·- 避免副作用确保计算属性是纯粹的计算
一、计算属性的定义与基本原理
在Vue.js里，计算属性就像是数据的魔法师，它会根据其他数据的值来计算出新值。和普通方法不同，它有点儿“记性”，知道哪些数据是“它”的亲信。只有当这些亲信改变了，“它”才会重新施展魔法，否则就拿出“缓存”里存好的结果，快速给出答案。二、计算属性与方法的对比
| 特性 | 计算属性 | 方法 | | ------------- | ---------------------------------------- | ----------------------------------------- | | 缓存机制 | 基于依赖项缓存结果 | 每次调用都会重新计算 | | 依赖追踪 | 自动追踪依赖项 | 不自动追踪依赖项 | | 使用场景 | 适合依赖多个数据源的场景 | 适合简单计算或不频繁调用的场景 |比如，计算属性是这样的：
``` computed: { total() { return this.quantity this.price; } } ```
``` methods: { getTotal() { return this.quantity this.price; } } ``` 尽管两种方法都能计算出总金额，计算属性由于缓存机制，在依赖项不变的情况下会更快。
三、计算属性的缓存机制
计算属性的“记性”是通过“依赖追踪”来实现的。每当计算属性被访问，Vue会记下它依赖的数据。如果这些数据发生变化，Vue会告诉计算属性：“老弟，数据变了，得重新计算了！”然后，它会从“缓存”里拿出最新的结果。- 依赖追踪：Vue记录下依赖项。
- 缓存结果：计算结果会被存起来。
- 重新计算：当依赖项变化时，计算属性重新计算并更新缓存。