理解 MVVM 和 Vue

193 阅读1分钟

Observe
 Observe:数据监听器,监听数据、对象,如果数据、对象发生改变,即拿到最新的值通知订阅者,内部采用Object.definePropetry的gettersetter来实现
Compile
Compile:指令解析器,它的作用就是对每个元素节点的指令进行扫描的解析,根据指令模板替换数据,以及绑定响应的更新数据,也就是vue data里面的属性,
会直接更新到视图,如果data的值发生改变,则去订阅wathcer来更新视图,wathcer会将获取到的数据添加到消息订阅器中(Dep),数据变动通知(notify)订阅者,
再调用订阅者update来更新视图
Watcher
Watcher: 订阅者,作为连接 Observer 和 Compile 的桥梁,能够订阅并收到(往dep中存放收到的属性的变动)每个属性变动的通知,执行指令绑定的相应回调函数
(通过updata的方法来更新视图)。
dep
dep:就是用来存放订阅者(watcher)的
总结
当执行new vue()的时候,vue进入初始化,一方面Vue 会遍历 data 选项中的属性,并用 Object.defineProperty 将它们转为 getter/setter,实现数据变化监听
功能;另一方面,Vue 的指令编译器Compile 对元素节点的指令进行扫描和解析,初始化视图,并订阅Watcher 来更新视图, 此时Wather 会将自己添加到消息订阅器中
(Dep),初始化完毕。

当数据发生变化时,Observer 中的 setter 方法被触发,setter 会立即调用Dep.notify(),Dep 开始遍历所有的订阅者,并调用订阅者的 update 方法,订阅者收到
通知后对视图进行相应的更新。