Vue是怎样依赖收集的？

Vue的依赖收集是Vue实现响应式数据绑定的核心机制之一。在Vue中，当组件初始化时，Vue会对组件的data进行初始化，将普通的JavaScript对象转换成响应式对象。这个过程中，Vue会进行依赖收集，以便在数据发生变化时能够通知到所有依赖这个数据的地方。以下是Vue依赖收集的主要步骤和原理：

1. Dep类的创建与作用：

   • Vue内部创建了一个Dep类，用于管理所有的Watcher。Dep类中有两个重要的属性：一个是静态属性target，它指向当前正在计算的Watcher；另一个是subs属性，它是一个存储Watcher的数组，表示所有依赖这个Dep的Watcher。
   • Dep类还提供了几个关键方法：addSub用于将Watcher添加到subs数组中，removeSub用于从subs数组中移除Watcher，depend用于在计算属性或渲染过程中建立依赖关系，notify则在数据发生变化时通知所有依赖这个Dep的Watcher执行更新操作。

2. Watcher类的创建与作用：

   • Vue为每个组件实例创建一个Watcher对象。Watcher在初始化时会执行组件的渲染函数或其他计算属性函数，这个过程中会触发数据的getter操作，从而进行依赖收集。
   • Watcher类中有一个重要的方法addDep，它的作用是将当前的Watcher添加到所依赖数据的Dep中。这样，当数据发生变化时，对应的Dep就能通过notify方法通知到这个Watcher进行更新。

3. 依赖收集过程：

   • 在组件初始化或重新渲染时，Vue会调用Watcher的get方法（通常是通过渲染函数间接调用），这个方法内部会执行数据的getter操作。
   • 在getter操作内部，Vue会检查Dep.target是否存在（即是否有正在计算的Watcher）。如果存在，就将当前Dep与这个Watcher建立关联（通过调用Dep的depend方法）。
   • 这样，Vue就完成了从数据到视图的依赖收集过程。每个数据都知道自己被哪些Watcher所依赖，每个Watcher也知道自己依赖了哪些数据。

4. 数据变化时的响应：

   • 当数据发生变化时（例如用户输入改变了某个值），Vue会触发这个数据的setter操作。
   • 在setter操作内部，Vue会通知所有依赖这个数据的Dep进行更新（通过调用Dep的notify方法）。
   • Dep会遍历自己的subs数组，逐一触发里面Watcher的update方法，从而更新对应的视图。

总结来说，Vue的依赖收集是通过Dep类和Watcher类共同协作完成的。Dep类负责管理所有的Watcher并建立数据与Watcher之间的依赖关系；而Watcher类则负责在数据变化时触发视图的更新操作。这种机制使得Vue能够实现响应式的数据绑定和高效的视图更新。