}
// 添加watcher
appDep(dep){
this.deps.push(dep);
}
// 通知所有的watcher进行更新
notify(){
this.deps.forEach((dep) => {
dep.update();
})
}
}
// 观察者 做具体更新
class Watcher {
constructor(vm,key,cb){
// Vue实例
this.vm = vm;
// 需要更新的key
this.key = key;
// 更新后执行的函数
this.cb = cb;
// 将当前watcher实例指定到Dep静态属性target
// 用来在类间进行通信
Dep.target = this;
// 触发getter,添加依赖
this.vm[this.key];
Dep.target = null;
}
update(){
this.cb.call(this.vm,this.vm[this.key]);
}
}
Dep.target = this上面这段代码一定要注意，是向
Dep类中添加了一个静态属性。主要用来解析各种指令，比如
v-modal，
v-on:click等指令。然后将模版中的变量替换成数据，渲染
view，将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据发生变动，收到通知，更新视图。简单说下双向绑定，双向绑定原理，在编译的时候可以解析出v-model在做操作的时候，在使用v-model元素上添加了一个事件监听（input），把事件监听的回调函数作为事件监听的回调函数，如果input发生变化的时候把最新的值设置到vue的实例上，因为vue已经实现了数据的响应化，响应化的set函数会触发界面中所有依赖模块的更新，然后通知哪些model做依赖更新，所以界面中所有跟这个数据有管的东西就更新了。
class Compile {
constructor(el,vm) {
// 要遍历的宿主节点
this.$el = document.querySelector(el);
this.$vm = vm; // 编译
if(this.$el){
// 转换宿主节点内容为片段Fragment元素
this.$fragment = this.node2Fragment(this.$el);
// 执行编译过程
this.compile(this.$fragment);
// 将编译完的HTML结果追加至宿主节点中
this.$el.appendChild(this.$fragment);
}
}
// 将宿主元素中代码片段取出来，遍历，这样做比较高效
node2Fragment(el){
const frag = document.createDocumentFragment();
// 将宿主元素中所有子元素**（搬家，搬家，搬家）**至frag中
let child;
// 如果 el.firstChild 为undefined或null则会停止循环
while(child = el.firstChild){
frag.appendChild(child);
}
return frag;
}
compile(el){
// 宿主节点下的所有子元素
