class Watcher{ constructor(node, updatedAttr, vm, expression){ // 将传进来的值保存起来，这些数据都是渲染页面时要用到的数据 this.node = node; this.updatedAttr = updatedAttr; this.vm = vm; this.expression = expression; this.update(); } update(){ this.node[this.updatedAttr] = this.vm.$data[this.expression]; } }
2) 试想，我们该给哪些数据添加观察者？何时给数据添加观察者？
在解析元素的时候，当解析到v-text和v-model指令的时候，说明这个元素是需要和数据双向绑定的，因此我们在这时往容器中添加观察者。我们需用到这样一个数据结构：{属性1: [wathcer1, wathcer2...], 属性2: [...]}，如果不是很清晰，可以看下图：
可以看到：vue实例中有一个$wathcer对象，$wathcer的每个属性对应每个需要绑定的数据，值是一个数组，用来存放观察了该数据的观察者。（备注：Vue源码中专门创造了Dep这么一个类，对应这里所说的数组，本文属于简易版本，就不过多介绍了）
3) 劫持数据：利用对象的访问器属性getter和setter做到当数据更新的时候，触发一个动作，这个动作的主要目的就是让所有观察了该数据的观察者执行update方法。
总结一下，在本小节我们需要做的工作：
实现一个Wathcer类；
在解析指令的时候（即在compile方法中）添加观察者；
实现数据劫持（实现observe方法）。
完整代码如下：
class Vue { // 接收传进来的对象 constructor(options) { // 获取有用信息 this.$el = document.querySelector(options.el); this.$data = options.data; // 容器: {属性1: [wathcer1, wathcer2...], 属性2: [...]} this.$watcher = {}; // 解析元素: 实现Compile this.compile(this.$el); // 要解析元素, 就得把元素传进去 // 劫持数据: 实现 Observer this.observe(this.$data); // 要劫持数据, 就得把数据传入 } compile(el) { // 解析元素下的每一个子节点, 所以要获取el.children // 拓展: children 返回元素集合, childNodes返回节点集合 let nodes = el.children; // 解析每个子节点的指令 for (var i = 0, length = nodes.length; i < length; i++) { let node = nodes[i]; // 如果当前节点还有子元素, 递归解析该节点 if (node.children) { this.compile(node); } if (node.hasAttribute("v-text")) { let attrVal = node.getAttribute("v-text"); // node.textContent = this.$data[attrVal]; // Watcher在实例化时调用update, 替代了这行代码 /** * 试想Wathcer要更新节点数据的时候要用到哪些数据? * e.g. p.innerHTML = vm.$data[msg] * 所以要传入的参数依次是: 当前节点node, 需要更新的节点属性, vue实例, 绑定的数据属性 */ // 往容器中添加观察者: {msg1: [Watcher, Watcher...], msg2: [...]} if (!this.$watcher[attrVal]) { this.$watcher[attrVal] = []; } this.$watcher[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)) } if (node.hasAttribute("v-model")) { let attrVal = node.getAttribute("v-model"); node.value = this.$data[attrVal]; node.addEventListener("input", (ev) => { this.$data[attrVal] = ev.target.value; }) if (!this.$watcher[attrVal]) { this.$watcher[attrVal] = []; } // 不同于上处用的innerHTML, 这里input用的是vaule属性 this.$watcher[attrVal].push(new Watcher(node, "value", this, attrVal)) } } } observe(data) { Object.keys(data).forEach((key) => { let val = data[key]; // 这个val将一直保存在内存中,每次访问data[key],都是在访问这个val Object.defineProperty(data, key, { get() { return val; // 这里不能直接返回data[key],不然会陷入无限死循环 }, set(newVal) { if (val !== newVal) { val = newVal;// 同理,这里不能直接对data[key]进行设置,会陷入死循环 this.$watcher[key].forEach((w) => { w.update(); }) } } }) }) } } class Watcher { constructor(node, updatedAttr, vm, expression) { // 将传进来的值保存起来 this.node = node; this.updatedAttr = updatedAttr; this.vm = vm; this.expression = expression; this.update(); } update() { this.node[this.updatedAttr] = this.vm.$data[this.expression]; } } let vm = new Vue({ el: "#app", data: { msg: "hello world", msg2: "hello xiaofei" } })
至此，代码就完成了。
3. 未来的计划用设计模式的知识，分析上面这份源码存在的问题，并和Vue源码进行比对，算是对Vue源码的解析