自己动手模拟MVVM之五双向数据流及事件绑定

MVVM (Model-View-ViewModel) 是一种用于把数据和UI分离的设计模式。

前一篇已经完成了单项model到view的单向数据更新，今天来继续完善代码，实现数据从view到model的更新，以及事件绑定的部分。

思路

view到model的更新：

• 首先， 在view中增加一个input，并添加v-model="job"指令
• 然后在Complie解析模板的时候，如果是节点，则判断节点属性的key，去匹配v-model指令
• 匹配到指令后，添加v-model对应的key的观察者，完成绑定

事件绑定：在Compile解析模板的时候，如果是节点，则去判断节点属性的key是否以v-on开头，如果是则为节点绑定v-on后面的事件类型，事件回调函数为v-on开头的属性的值， 记得在初始化的时候配置methods，并绑定this为MVVM

演示地址

完整代码地址

总结

很粗糙，细节问题很多，只是模拟了mvvm实现的基本思路， demo中很多细节没有考虑，比如事件委托绑定、更新节点的粒度等，多读源码继续提升。