对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/mvvm
参考:
https://github.com/fastCreator/MVVM(极度参考,十分感谢该作者,直接看Vue会比较吃力的,但是看完这个作者的代码便会轻易很多,可惜这个作者没有对应博客说明,不然就爽了)
https://www.tangshuang.net/3756.html
https://www.cnblogs.com/kidney/p/8018226.html
http://www.cnblogs.com/kidney/p/6052935.html
https://github.com/livoras/blog/issues/13
之前我们完成了简陋的从模板到虚拟DOM从虚拟DOM到HTML的代码,我们这里图简单没有对属性和样式做特殊处理,还是按照一般的模板方式进行的解析,后续看看这块怎么处理吧,今天我们的任务是完成setData时候同步更新我们的HTML的操作,这里首先我们来看看一般的MVVM中数据变化更新是怎么完成的,在这个基础上进行后续的代码可能各位看得更清晰。
一般的MVVM双向绑定
一般来说,我们数据变化的时候都是一个发布订阅模式,我们调用setData的时候会执行类似这样的代码:
1 function setData(data) { 2 //做下数据变更3 //......4 5 //会通知对应数据对象数据发生变化了,这个数据对应的所有dom节点都会发生改变6 this.notifyAll(); 7 }
而在vue中我们是直接做这种操作,dom就发生了变化:
this.name = '叶小钗';这个是因为,他使用了访问器属性:
1 var obj = { }; 2 // 为obj定义一个名为 name 的访问器属性 3 Object.defineProperty(obj, "name", { 4 5 get: function () { 6 console.log('get', arguments); 7 }, 8 set: function (val) { 9 console.log('set', arguments); 10 } 11 }) 12 obj.name = '叶小钗'13 console.log(obj, obj.name) 14 /*15 set Arguments ["叶小钗", callee: ƒ, Symbol(Symbol.iterator): ƒ] 16 get Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ] 17 */
如果这里写这样的代码:
1 <div id="a"> 2 </div> 3 <input type="text" id

