# 计算属性与依赖追踪

• Computed 介绍
• 依赖追踪概念
• 依赖追踪算法

# Computed 介绍

Reative 的数据类型可以帮助我们响应式的实现数据的更新，如果使用过 Vue 我们会发现 Vue 的每个组件的 data 属性都相当于一个 Reactive。但 Reactive 不能覆盖我们全部的使用场景，Computed 在 Vue 当中可以直接的从 data 定义出一个函数动态响应 data 的更新 并更新函数的返回值。就有点类似 Excel 的单元公式计算。

• 从 Excel 到 Computed
  • Reactive：普通单元格中的原始数据
  • Computed：插入了公式的单元格
  • Reactive 单元格更新时，Computed 单元格根据公式（依赖）自动更新

# 依赖追踪概念

Computed 函数示例

const isEmpty = () => data.values.length === 0

• 指定 Excel 的公式时，我们需要手动选择公式所依赖的单元格
• 但Computed 函数中，我们没有传入 Computed 的依赖
• Computed 如何在 Reactive 更新时自动更新自身？依赖追踪算法

# 依赖追踪算法

• Reactive 本质上在 set Reactive 时去执行更新
• Computed 本质上在 get Reactive 时标记依赖

1. Computed 函数 C 初次求值时，标记 C
2. 对 C 求值过程中，获取 Reactive 的值，各 Reactive 的 getter 被触发
3. 为每个 Reactive 维护一个依赖者 deps 数组，将 C 添加至数组内
4. 求值完成后，标记清空，返回求值结果
5. Reactive 更新时，各 deps 中 C 均在 Reactive setter 中触发，一并更新