【vue源码解析】简易版vue原理分析

简单源码框架代码

https://github.com/DMQ/mvvm/tree/master/js

编译器Compile

compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

订阅者Watcher

Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退

消息订阅器 Dep

很简单，维护一个数组，用来收集订阅者，数据变动触发notify，再调用订阅者的update方法

数据劫持Observer

实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者