Vue依赖收集的过程_懂的解析粉丝当侦听的属性变化时就会执行这个回调
Vue依赖收集的过程：通俗易懂的解析
一、初始化阶段创建依赖收集容器
在Vue刚创建实例的时候，它会为每个响应式属性创建一个专门的“看护者”对象，我们叫它Dep。这个Dep就像是每个属性的管家，负责记录所有关心这个属性变化的组件或计算属性。简单来说，Dep就是一个容器，里面存储了所有依赖于这个属性的对象。每个对象代表一个组件或计算属性，它们都是这个属性的“粉丝”。
二、计算属性和侦听器的依赖收集
当我们在Vue中使用计算属性或侦听器时，Vue会自动进行依赖收集。| 步骤 | 说明 |
|---|---|
| 计算属性初始化 | 创建一个对象，把计算属性的getter函数交给它管理。 |
| 依赖收集过程 | 当getter函数运行时，它会读取依赖的属性，这时Dep就会将这些“粉丝”记录下来。 |
| 侦听器依赖收集 | 侦听器初始化时，也会创建一个对象，把回调函数交给它。当侦听的属性变化时，就会执行这个回调。 |
三、在数据变化时触发依赖重新计算
当数据发生变化时，Vue会根据以下步骤进行依赖重新计算：- 数据变化触发方法：当数据变化时，会调用一个方法。
- 通知依赖进行更新：这个方法会告诉Dep，数据变化了，然后Dep会通知所有“粉丝”。
- 对象更新视图：每个“粉丝”会重新执行对应的getter函数或回调，然后更新视图。
为了更好地使用这个管家，我们开发者需要注意以下几点：
- 正确使用计算属性和侦听器：确保它们依赖的属性正确无误，避免不必要的视图更新。 - 避免在侦听器中进行复杂逻辑：尽量将复杂的逻辑放在计算属性中，这样代码更易读，性能也更好。 - 理解响应式系统的原理：这有助于我们更高效地开发和调试应用。 通过以上解析，相信大家对Vue的依赖收集机制有了更清晰的认识。