一套代码小程序&Web&Native运行的探索04——数据更新

 接上文:一套代码小程序&Web&Native运行的探索03

对应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
                        
关键字:
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信