请说明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
,让它们执行对应的操作。