Vue Watch和Dep的关系 ？

在 Vue.js 中，我们经常使用 watch 来观察和响应 Vue 实例上的数据变动。其实在 Vue 内部，watch 是通过 Dep （依赖收集类）和 Watcher （观察者类）实现的。

当我们在组件中使用 watch 选项，或者在计算属性 computed 中使用依赖数据时，Vue 会为每一个 watch 或 computed 创建一个 Watcher 实例。这个 Watcher 就是观察者，它会“观察”它所依赖的数据。

Dep 是一个可以收集依赖的类，它内部维护了一个 subs 数组，用来存放所有依赖这个数据的 Watcher。

当一个数据被访问时，Vue 会调用这个数据的 getter 函数，getter 函数中会调用 Dep 的 depend 方法，将当前的 Watcher（即当前正在计算的 watch 或 computed）添加到 Dep 的 subs 数组中，这个过程叫做“依赖收集”。

当这个数据发生变化时，Vue 会调用这个数据的 setter 函数，setter 函数中会调用 Dep 的 notify 方法，遍历 subs 数组，调用每一个 Watcher 的 update 方法，通知它们数据已经更新，这个过程叫做“派发更新”。

所以，watch 和 Dep 的关系是：watch 是通过 Dep 来监听数据变化的，当数据变化时，Dep 会通知所有依赖这个数据的 watch，让它们执行对应的操作。