ginobilee/mvvm_test

a simple mvvm lib for learning data-binding学习mvvm框架的双向绑定

mvvm_test

a simple mvvm framework test for learning

一个双向绑定的简单实现

原理

1. 核心**是对数据仓库中的每个属性，建立发布者，对应的文档节点作为订阅者订阅该属性的更新。实现方法是对数据的setter进行劫持。每次更新值的时候，在setter中调用对应发布者的notify函数，通知订阅者更新。
2. 反向数据流通过解析文档树，拿到节点上自定义的命令或双引号引用变量。如v-bind指令，将当前节点绑定为对应数据的订阅者。这里将节点绑定为对应属性的订阅者是通过对数据的getter进行劫持，在执行时判断有无需要添加的订阅者。
3. 所以这里的关键就是建立这种发布/订阅者的关系。负责建立这种关系的角色就是observer。它的具体作用是，对每个key建立一个发布者，并让对应的订阅者订阅改发布者。
4. 在元素的事件中，只更新仓库中的值，然后仓库的更新引起dom中的更新。即，不在元素的事件中直接更改dom。

实现

1. 支持{{key}}和v-bind形式的绑定。
2. 支持input的v-model属性。