字数

1011 字

阅读时间

4 分钟

computed 有缓存,不方便实现异步, computed 属性在首次访问时会立即运行，计算出其值并缓存。

总结

• watcher：Vue 内部类，负责监视数据变化。
• watch 属性：组件选项中的一个属性，定义要观察的响应式数据及其回调。
• watch 对象：实际上就是 watch 属性的内容。
• $watch：Vue 实例的方法，用于动态添加观察者。

希望这能帮助你更清楚地区分这些概念！如果还有疑问，请随时问我。

您说：

computed的原理是, 创建一个_computedwatcher来储存watcher, 创建一个watcher.dirty作为计算属性缓存的出发点, 创建一个dep用来收集依赖, watcher用来观察dep是否更新,更新时watcher执行副作用函数改变watcher.dirty的值为true, 触发计算属性重新计算; 计算属性的原理是这样吗 还记得创建“计算属性Watcher”，配置的 lazy 为 true。dirty 的初始值等同于 lazy。所以在初始化页面渲染，对计算属性进行取值时，会执行一次 watcher.evaluate。

ChatGPT 说：

你的理解基本上是正确的，下面我来详细解释一下 computed 属性的原理：

1. 创建 ComputedWatcher：

   • 当你在 Vue 中定义一个计算属性时，Vue 会创建一个 watcher 实例，通常称为 ComputedWatcher。这个 watcher 负责管理计算属性的状态和依赖关系。

2. 缓存机制：

   • ComputedWatcher 会维护一个 dirty 标志，表示计算属性是否需要重新计算。初始时，这个标志是 true，表明计算属性是“脏”的，需重新计算。

3. 依赖收集：

   • 在计算属性的 getter 函数中，watcher 会收集它所依赖的响应式数据（依赖项）。每次访问依赖项时，Vue 会将当前的 watcher 注册到依赖项的 dep 中。

4. 更新机制：

   • 当依赖项发生变化时，相关的 dep 会通知所有的 watcher，这时会将 dirty 标志设置为 true，标记计算属性需要重新计算。

5. 重新计算：

   • 在下次访问计算属性时，ComputedWatcher 会检查 dirty 标志。如果为 true，它会重新执行计算属性的 getter 函数，更新计算结果并将 dirty 设置为 false。

6. 副作用函数：

   • watcher 负责执行计算属性的副作用函数（getter），并将计算结果缓存，以便后续访问时直接返回缓存值，而无需再次计算。

总结来说，计算属性的原理就是通过创建一个 watcher 来管理依赖、缓存计算结果，并在依赖变化时标记需要重新计算，从而实现高效的响应式数据处理。你的理解是相当接近的，特别是关于 dirty 标志和依赖收集的部分！

您说：

getter函数是谁定义的

ChatGPT 说：

在 Vue 的计算属性中，getter 函数是你在组件中定义的计算属性本身的访问器函数。具体来说，当你在 Vue 组件的 computed 选项中定义一个计算属性时，会提供一个 getter 函数来返回计算的值。

示例

new Vue({
  el: '#app',
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

在这个例子中，fullName 是一个计算属性，它的 getter 函数就是返回 ${this.firstName} ${this.lastName} 的函数。当访问 this.fullName 时，Vue 会调用这个 getter 函数，计算并返回 fullName 的值。

因此，getter 函数是由你在 computed 中定义的，Vue 会在内部管理它的执行和依赖收集。

贡献者

sunchengzhi

文件历史

最后编辑于 大约 2 个月前查看完整历史

de5fa-fix:修改文件名