双向绑定原理使用ES5 Object.definePropety数据劫持,结合发布-订阅者模式实现。
主要步骤如下:
1、Observer类递归遍历data当中的属性,为其添加set get方法。初始化属性Dep订阅器。初始化时调用get方法,将watcher观察者(订阅者)添加到订阅器。当数据修改时调用订阅器notify(发布)方法通知所有的watcher更新视图。
2、Compile类,解析DOM中的元素。编译节点时为每一个有v-model或者是{{}}的节点创建watcher实例,调用自身的updata方法。将带模板指令替换为数据,updata方法会触发属性的get。将此watcher观察者(订阅者)添加到订阅器。
3、Watcher类,是Observer和Compile之间通信的桥梁。主要有以下功能:
(1)自身实例化时会向Dep(属性订阅器)中添加自己
(2)自己有个update方法更新视图。
(3)当set时会调用dep.notify发布通知,会调用自身的update方法
4、Dep类的主要目的是:为每一个数据创建一个dep实例,实例中的subs存放每一个节点中使用该数据的watcher
总结:
Observer 来监听自己的 model 数据变化
Compile来解析编译模板指令
Watcher 是Observer Compile 之间的通信桥梁
Dep存放model的watcher