Vue是一个典型的MVVM框架,它通过数据劫持 + 发布者-订阅者模式实现了数据的双向绑定
1、对于MVVM的理解?
MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型。
View 代表UI 组件,它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化(如input等)会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
2、数据劫持
通过Obeject.defineProperty()来实现数据劫持,这个函数内部有setter和getter,每当发生数据变化时,就会触发getter,当获取数据时就会触发setter,可以在这两个回调中通知订阅者。
3、VUE中4个重要对象
Observer:MVVM中的model层,通过Obeject.defineProperty()实现数据劫持,即复写对象属性的get和set方法,Observer的实现过程中,会给每一个属性添加一个对应的dep对象,在该属性的get函数中调用dep.depend(),在该属性的set函数中,调用dep.notice()方法,通知到订阅器Dep。
Dep:订阅器,dep.depend()方法,是将Dep.target添加进对应的响应式数据的属性中,而Dep.target对象在new Watcher()时就被赋值给了该watcher对象,因此dep.depend()方法其实就是将此watcher添加进了对应的dep对象中,而dep对象对应了一个响应式的对象属性,当该属性发生变化时,就会调用dep.update()方法,该方法就会调用此watcher,从而实现页面的刷新。
Watcher:Observer和Compile之间通信的桥梁,是MVVM中的ViewModel层,它主要任务是在自身实例化时往Dep里添加自己,做为订阅器里的订阅者,当属性变动时,Observer通过dep.notice()方法通知到Dep订阅器时,调用订阅者自身的update()方法。
Compile:MVVM中的view层。主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。
写的比较简单,具体请参考剖析Vue原理&实现双向绑定MVVM ,写的非常好
----------------------------------------------------分割线-------------------------------------------
写在后面的话:仿写了一个简单的,git地址:https://github.com/anne114/likeVue.git