手写vue源码(精简版) -- 更新显示(Watcher)，双向数据绑定

vue原理图

剩余工作

上一节我们实现了编译工作，完成了视图的初始化显示，剩下的就是数据的响应化了，所谓响应化，即当数据发生变化时，视图能够响应变化并更新视图，这时我们需要引入一个Watcher对象来帮我们完成这部分的工作。在完成这部分工作前，我们需要弄清楚两个问题：
1、什么时候引入Watcher。要搞明白这个问题，我们时刻要记住，Watcher是为了实现数据响应化的，是什么数据的响应化？是那些依赖如大括号表达式，v-xxx指令等所对应数据的响应化，所以我们其实应该在编译阶段，依赖的统一入口处update中引入Watcher，这样就保证了每一个依赖都对应一个Watcher,确保了每个依赖在数据改变时都能得到更新。
2、传什么参数给Watcher。首先需要Watcher传递一个更新函数，在数据变化时执行更新，其次是启动依赖收集工作，我们之前给data中的每个数据定义了get方法，每个数据还对应了一个Dep实例，在get中当我们检测到Dep.target中有值时，就将Dep.target收集起来，这个Dep.target就是Watcher实例，所以我们要在Watcher构造函数中给Dep.target赋值，并且调用一下get，从而启动依赖的收集，所以还需要传入vue实例和依赖所对应的key。

实现更新显示

下面我们实现更新显示。

//ES6实现
//更新显示实现
class Watcher {
	constructor(vm, exp, cb) {
		this.cb = cb;
		Dep.target = this; //把Watcher赋值给Dep.target
		vm[exp]; //调用get
		Dep.target = null;
	}
	update() { //dep.notify()通知更新最终入口
		//内存 --> 视图，也是双向数据绑定中的另一方向
		this.cb(); //更新显示
	}
}
class Vue {
    constructor(options) {
   		//缓存配置项
        this.$el = options.el || document.body;
        this.$options = options;
        const data = this.$data = options.data;
		//劫持数据
        this.hijackData(data);
        //编译模版
		this.compile(this.$el);
    }
	
	compile(el) {
		//找到vue管理的区域
		this.$el = this.isElementNode(el) ? el : document.querySelector(el);
		if (this.$el) {
			//将this.$el中的子节点转移到内存中,document --> 内存
			this.$fragment = this.node2Fragment(this.$el);
			//编译
			this.compileElements(this.$fragment);
			//内存 --> document
			this.$el.appendChild(this.$fragment);
		}
	}
	//将文档节点转移到fragment(内存)中
	node2Fragment(node) {
		let child = null;
		let fragment = document.createDocumentFragment();
		while (child = node.firstChild) {
			//节点有且只有一个父节点，
			//所以是转移，不是复制，不会出现两份，
			//相当于是一个水缸的水舀到另一个水缸里，fragemnt满了，this.$el空了
			fragment.appendChild(child); 
		}
		return fragment;
	}
	compileElements(vNode) {
		let text = '';
		//正则表达式，用于匹配大括号表达式
		const reg = /\{\{(.*)\}\}/;
		//转为真数组并遍历所有节点
		Array.from(vNode.childNodes).forEach(node => {
			text = node.textContent;
			if (this.isElementNode(node) { //元素节点，解析所有的指令属性
				let exp = ''; //表达式
				let dir = ''; //指令
				let attrName = '';
				let attrs = node.attributes; 
				 //取出所有属性，转为数组并遍历
				Array.from(attrs).forEach(attr => {
					exp = attr.value;
					attrName =  attr.name;
					// 普通指令v-text,v-html，v-model等
					if (this.isDirective(attrName) {
						dir = attrName.substring(2);
						this.update(node, exp, dir);
						node.removeAttribute(attrName);
					//事件指令@click等
					} else if (this.isEvent(attrName) {
						dir = attrName.substring(1);
						this.eventHandler(node, exp, dir);
						node.removeAttribute(attrName);
					}
				});
			} else if (this.isTextNode(node) && reg.test(text)) { //文本节点，大括号表达式
				this.update(node, RegExp.$1.trim(), 'text');
			}
			//递归遍历所有层次的节点
			if (node.hasChildNodes()) {
				this.compileElements(node);
			}
		});
	}
	//事件处理器
	eventHandler(node, exp, eType) {
		const cb = this.$options.methods && this.$options.methods[exp];
		cb && node.addEventListener(eType, cb.bind(this));
	}
	//更新视图，依赖的统一入口，每个引用过data中数据的依赖都会进来这里
	update(node, exp, dir) {
		//拿到相对应的更新函数
		const fn = this[dir+'Updater'];
		//初始化更新显示，这里需要指定调用的实例this,即vue实例
		fn && fn.call(this, node, exp);
		//变化更新显示，下一节内容
		new Watcher(this, exp, () => {
			fn && fn.call(this, node, exp);
		});
	}
	textUpdater(vm, node, exp) {
		node.textContent = vm[exp];
	}
	htmlUpdater(vm, node, exp) {
		node.innerHTML = vm[exp];
	}
	modelUpdater(vm, node, exp) {
		node.value = vm[exp];
		 //添加input事件监听
		 //v-model双向数据绑定的其中一个方向，即：视图 --> 内存
		node.addEventListener('input', e => {
			vm[exp] = e.target.value;
		});
	}
	
	//判断是否为元素节点
	isElementNode(node) {
		return (node.nodeType === 1);
	}
	//判断是否为文本节点
	isTextNode(node) {
		return (node.nodeType === 3);
	}

    hijackData(data) {
        if (!data || typeof data !== 'object') { //不存在或者不为对象，返回（递归退出条件）
            return;
        }
        //拿到data中所有可枚举的属性
        Object.keys(data).forEach(key => {
        	//递归遍历所有层次
            this.hijackData(data[key]);
            //这里可以把第一节([数据代理](https://blog.csdn.net/huolinianyu/article/details/100111065))
            //中的数据代理放到下面，复用相同的处理逻辑
            //this.proxyData(key);
            //创建观察者
            new Observer(data, key);
        });
    }
    proxyData(key) {
    	Object.key(this, key, {
    		enumerable: true,
    		configurable: false,
    		get() {
    			return this.$data[key];
    		},
    		set(newVal) {
    			this.$data[key] = newVal;
    		}
    	});
    }
}

//观察者实现
class Observer {
    constructor(data, key) {
    	//对数据进行观察
        this.observe(data, key, data[key]);
    }
    observe(data, key, val) {
    	//data中每一个数据对应一个Dep容器，存放所有依赖于该数据的依赖项
        const dep = new Dep();
        Object.defineProperty(data, key, {
            enumerable: true, //可枚举
            configurable: false,//不能再配置
            get() {
                if (Dep.target) {//Dep.target存放具体的依赖，在编译阶段检测到依赖后被赋值
                    dep.addDep(Dep.target); //依赖收集
                }
                return val;
            },
            set(newVal) {
                if (newVal === val) {
                    return;
                }
                val = newVal;
                dep.notify(); //当数据发生变化时，通知所有的依赖进行更新显示
            }
        });
    }
}

//Dep容器，data中的每个数据会对应一个，用来收集并存储依赖
class Dep {
    constructor() {
        this.deps = []; //所有的依赖将存放在该数组中
    }
    //收集依赖
    addDep(dep) {
        this.deps.push(dep);
    }
    //通知更新
    notify() {
        this.deps.forEach(dep => {
            dep.updata();
        });
    }
}

完整源码。
上一节：模版编译, 双向数据绑定