vue2双向数据绑定原理

159 阅读1分钟

双向绑定原理使用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