Vue - watcher原理

发布时间 2023-04-17 16:04:08作者: 瑶哥哥可真帅啊!

原理

  • 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:收集数据函数,主要是对数据的收集依赖、删除依赖、向依赖发送消息。