请说明Vue Watch和Dep的关系 ?

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

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

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

当一个数据被访问时,Vue 会调用这个数据的 getter 函数,getter 函数中会调用 Depdepend 方法,将当前的 Watcher(即当前正在计算的 watchcomputed)添加到 Depsubs 数组中,这个过程叫做“依赖收集”。

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

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

发表评论

后才能评论