vue.js 反应性依赖类如何可能有许多观察者订阅者

Question

如您所知，对于每个数据属性，都会创建一个 new Dep 类。 Each Dep 类有watchers 的订阅者。

我查看了 vue.js 源代码，对于每个组件，只创建了一个 watcher 类，它还包含 render 函数（组件的模板）。

1) 您能否描述一下何时以及为什么其中一个组件的data 属性可能具有具有多个watcher 类的Dep 类？

2) 我可以这样总结一下：如果我们有一个具有 5 个data 属性的组件。这 5 个数据属性中的每一个都有不同的 Dep 类实例。并且每个Dep 类都具有相同的Watcher 并且watcher 拥有组件的render 函数。如果状态发生变化，这 5 个 Dep 类的通知之一将运行，并且该通知运行其 watcher's render 函数？

Answer 1

您可能会发现此介绍很有用：

https://medium.com/dailyjs/tracing-or-debugging-vue-js-reactivity-the-computed-tree-9da0ba1df5f9

正如您所提到的，每个数据属性都有自己的Dep 实例。每个Dep 都有一个subs 属性，其中包含一组订阅者。该数组中的订阅者都是Watcher 类的实例。如果数据属性发生变化，则相应的Dep 将通知其subs 中的每个Watcher。

每个Watcher 还在一个名为deps 的属性中保留对其依赖项的引用。这只是Watcher 订阅的Dep 对象的数组。

您将能够在浏览器开发人员工具中看到这一点。如果你记录一个 Vue 实例，你会发现一个名为 _watchers 的属性，它包含与该组件相关的所有观察者。扩展它们的 deps 将引导您到 Dep 对象，但要准确判断每个 Dep 代表的数据属性可能很棘手。

渲染进程有一个Watcher，用于跟踪其数据依赖关系。每个组件实例只会获得其中一个。

如果您使用watch 或$watch，也会创建一个Watcher。同样，您将能够在 _watchers 中看到这些。

每个计算属性都有一个Watcher。这些将出现在_watchers 数组中，但在_computedWatchers 中更容易看到它们。

需要注意的一个关键点是依赖关系是扁平化的。如果您使用计算属性，您实际上只会获得对所有贡献它的数据属性的依赖。您不能直接依赖于计算属性本身。

所以回到你原来的问题：

1. 渲染、计算属性和watch 都将有助于subs 的Dep。由于依赖项的扁平化，计算属性通常会贡献比您预期更多的订阅者。
2. 几乎。不直接调用 render 函数。当用于渲染的Watcher 被通知数据更改时，它实际上只是将组件添加到队列中。直到下一个滴答开始，才会处理该渲染队列。