Vue - watcher原理
原理
-
Watcher原理是先把自己设置到全局唯一指定的位置(window.target),然后读取数据。因为读取了数据,所以会触发这个数据的getter。然后在getter中就会从全局唯一的那个位置读取真正读取数据的watcher,并把这个watcher收集到Dep中去。通过这样的方式,watcher可以主动去订阅任意一个数据的变化。
-
Observer类,把object中的数据(包括子数据)转换成响应式的,也就是他会侦测Object中数据的变化。
-
Data通过Observer转换成了getter/setter的形式来追踪变化。
-
当外界读取数据时会调用watcher,会触发getter把watcher添加到Dep依赖中。
-
当数据发生了变化,会触发setter,向Dep中的依赖(watcher)发送通知。
(调用修改数据方法,把数据修改之后,通过dep通知watcher将更新的数据进行渲染) -
Watcher接收到通知后,会向外界发送通知,变化通知到外界可能触发视图更新,也可能触发用户的某个回调函数。
Dep:收集数据函数,主要是对数据的收集依赖、删除依赖、向依赖发送消息。