说一下 Vue 的 computed 的实现原理

Vue 中的 `computed` 是一种响应式特性，它基于观察者模式实现了数据计算和视图更新。当依赖的数据发生变化时，`computed` 计算属性会自动重新计算并触发视图更新。其工作原理主要包括以下几个步骤：

1. **声明计算属性**: 使用 `computed` 对象创建一个属性，它实际上是一个函数，该函数接受当前组件实例作为第一个参数 (`this`)。

data() {
  return {
    firstName: 'John',
    lastName: 'Doe'
  }
},
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

2. **数据追踪**: 当 `firstName` 或 `lastName` 发生改变时，Vue 实例会检测到依赖变化，并将这些变化添加到观察者列表中。

3. **计算函数**: 当 `fullName` 被访问时（无论是在模板中还是在其他地方），实际上是调用对应的计算函数。如果依赖项已更改，计算函数会被重新执行。

4. **缓存结果**: 计算函数的结果会被缓存起来，下次请求时直接返回缓存值，避免了不必要的重新计算。只有当依赖项发生变化时，才会清除旧的缓存并重新计算新的值。

5. **视图更新**: 当计算后的值改变时，Vue 会通知所有监听这个计算属性的变化的侦听器，进而更新相应的 DOM 结构。