程序员Vue.js

Vue响应式原理

2020-12-03  本文已影响0人  BSKSdorica

1.核心实现类:

Observer:给对象的属性添加getter(依赖收集)和setter(派发更新)

Dep:收集响应式对象的依赖关系,每个响应式对象都拥有一个Dep实例,数据变更时,会通过dep.notify()通知各个watcher

Watcher:观察者对象。render watcher,computed watcher,user watcher。

2.Watcher和Dep的关系:

watcher实例化dep并向dep.subs添加订阅者,dep通过notify遍历dep.subs通知watcher更新

3.原理:

创建vue实例时,vue遍历data的属性,利用Object.defineProperty为属性添加getter和setter对数据进行劫持,并在内部追踪依赖,在属性被访问和修改时通知变化。 

上一篇下一篇

猜你喜欢

热点阅读